html5 video的视频播放控制-优快云博客

本文不考虑兼容性，单纯的记录video的简单用法。分两个部分，分贝是html角度、js角度和控件

测试视频地址：http://www.runoob.com/try/demo_source/movie.mp4（来源网络）

一、从html入手来看

1.1、最简单的video标签

<video src="视频地址">
您的浏览器不支持 video 标签。
</video>

1.2、显示默认控制条

 controls="controls"

<video controls="controls" src="视频地址">
    您的浏览器不支持 video 标签。
</video>

1.3、使用source设置视频地址

<video controls>
<source src="指定MP4格式视频地址" type="video/mp4">
<source src="指定MP4格式视频地址ogg" type="video/ogg">
    ...
    您的浏览器不支持 video 标签。
</video>

1.4、给video设置100%样式

<div style="width:400px;height:540px;background-color:#ccc;">
    <video controls style="width:100%;height:100%;">
    <source src="视频地址" type="video/mp4">
     您的浏览器不支持 video 标签。
    </video>
</div>

通过实践，会发现内部视频区域不会铺满（如下图），可以通过设置video的css object-fit: fill

<div style="width:400px;height:540px;background-color:#ccc;">
    <video controls style="width:100%;height:100%;object-fit: fill">
    <source src="视频地址" type="video/mp4">
     您的浏览器不支持 video 标签。
    </video>
</div>

1.5、自动播放autoplay

在视频装载完成自动播放

<video src="视频地址" autoplay>
    您的浏览器不支持 video 标签。
</video>

1.6、循环播放loop

<video src="视频地址" autoplay loop>
    您的浏览器不支持 video 标签。
</video>

1.7、静音播放muted

<video src="视频地址" autoplay muted>
    您的浏览器不支持 video 标签。
</video>

1.8、预加载视频preload

预加载指的是视频没有播放，但提前进行加载。如果视频已经播放了，那预加载也就无用了。

<video src="视频地址" preload>
    您的浏览器不支持 video 标签。
</video>

二、js对video的操作

2.1、操作对象是谁

指定的video对象，dom（本节以下内容统一用video表示对象）

2.2、播放视频

video.play();

2.3、暂停视频

video.pause();

2.4、监听视频播放时间

video.addEventListener("timeupdate",function(){
    this.currentTime//当前时间（单位是秒）
    Math.floor(this.duration);//转换成整数
},false);

2.5、获取视频总时长

获取视频时长是有可能延迟的

let timer = setInterval(function () {
    if(video.duration){
        Math.floor(video.duration);//单位是秒
        clearInterval(timer);
    }
},1000);

2.6、控制音量大小volume

2.7、控制音量大小volume

(赋值0-1)

2.8、全屏

进入video.requestFullscreen();

退出 document.exitFullscreen();

三、常用控件

3.1、自定义播放进度

3.2、开始、暂停、重播、日期显示

转载于:https://www.cnblogs.com/muzhang/articles/9970591.html