web前端入门到实战：Html5新增视频功能——video API 事件

最新推荐文章于 2023-08-04 10:20:37 发布

VIP文章白T恤架构师

最新推荐文章于 2023-08-04 10:20:37 发布

阅读量846

点赞数

分类专栏： html 文章标签： web javascript html 前端前端开发

本文链接：https://blog.csdn.net/ITHHH111/article/details/105636229

版权

video API事件

** play() 可以控制视频自动播放**

但是在chrome浏览器中不允许自动播放，只有在设置静音时才能允许自动播放

理由是：视频自动播放在终端非常耗电，因此被禁止

不过chrome浏览器允许自动播放7s以内的视频，然而很少有人会放7s以内的视频，而是直接用gif


专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
</head>
<body>
    <video src="data/imooc.mp4" controls id="myVideo"></video>

    <script>
        var myVideo=document.getElementById("myVideo");
        myVideo.play(); //在谷歌浏览器中无法自动播放，除非添加了事件
 window.onclick=function(){
            myVideo.play();
        } </script>
</body>
</html>

pause() 视频暂停

    <video src="data/imooc.mp4" controls id="myVideo"></video>
    <div id="playNode">播放</div>
    <div id="pauseNode">暂停</div>

    <script>
        var myVideo=document.getElementById("myVideo"); //点击控制播放与暂停
        //id可以直接使用，不用DOM获取
 playNode.onclick=function(){
            myVideo.play();
        }
        pauseNode.onclick=function(){
            myVideo.pause();
        } //5秒后视频自动暂停
 setTimeout(function(){
            myVideo.pause();
        },5000); </script>

duration 视频总长度

在刚加载时无法显示，结果是NaN

可以使用定时器解决，或者等到时视频播放结束

    <video src="data/imooc.mp4" controls id="myVideo"></video>
    <div id="playNode">播放</div>
    <div id="pauseNode">暂停</div>

    <script>
        var myVideo=document.getElementById("myVideo");

        console.log(myVideo.duration);//NaN
 setTimeout(function(){
            console.log(myVideo.duration);//206.485333

            var min=parseInt(myVideo.duration/60);//分
            var sec=parseInt(myVideo.duration%60);//秒
 console.log("总时长"+min+":"+sec);//总时长3:26
 },200); </script>

currentT

最低0.47元/天解锁文章

白T恤架构师

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web前端入门到实战：Html5新增视频功能——video API 事件

video API事件** play()  可以控制视频自动播放**但是在chrome浏览器中不允许自动播放，只有在设置静音时才能允许自动播放理由是：视频自动播放在终端非常耗电，因此被禁止不过chrome浏览器允许自动播放7s以内的视频，然而很少有人会放7s以内的视频，而是直接用gif专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的...
复制链接

扫一扫