广告
广告
广告
html/css/javascript您现在的位置是:主页 > html/css/javascript >

JS判断视频Video的播放、暂停、结束完成及获取长度等事件监听处理

2023-04-25 10:05:57html/css/javascript 402人已围观

controls:加上这个属性,Gecko 会提供用户控制,允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。
浏览器并不是都支持相同的视频格式,所以你可以在 <source> 元素里提供多个视频源,然后浏览器将会使用它所支持的第一个源。
<video id="video" controls="controls">
    <source type="video/mp4" src="mi.mp4">
    <source src="myVideo.webm" type="video/webm">
</video>

// 视频加载后获取视频的长度
<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener('loadedmetadata', function () { //加载数据
        //视频的总长度
        console.log(elevideo.duration);
    });
</script>

// 视频开始播放
<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener('play', function () { //播放开始执行的函数
        console.log("开始播放");
    });
</script>
 
// 视频正在播放中
<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener('playing', function () { //播放中
       console.log("播放中");
    });
</script>
 
// 视频加载中
<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener('waiting', function () { //加载
        console.log("加载中");
    });
</script>

// 视频暂停播放
<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener('pause', function () { //暂停开始执行的函数
        console.log("暂停播放");
    });
</script>

// 视频结束播放
<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener('ended', function () { //结束
        console.log("播放结束");
    }, false);
</script>

 


扫码添加技术微信【解决问题,仅需10元起】

专注中小企业网站建设、网站安全15年。
熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascript等。
承接:企业仿站、网站修改、网站改版、BUG修复、问题处理、二次开发、PSD转HTML、网站被黑、网站漏洞修复等。
专业解决各种疑难杂症,您有任何网站问题都可联系我们技术人员微信。
➥ 可淘宝担保交易,安全无风险

广告
广告
技术微信