浏览器需要播放某种视频则需要安装指定视频解码器软件。
常见的视频格式有：x.mp4 / x.flv / x.mov / 切片视频。
播放视频常用技术：
- html5标签 <video src="x.mp4"></video>
优点：简单；缺点：视频不能加密。 - flash播放
需要下载flash播放器插件，缺点：adobe 2020不提供技术。 - 第三方播放插件
优点：效率不错。
一、html5标签语法
- 简洁
<video src="视频文件路径"></video>
- 标准
<video>
<source src="视频路径.mp4"></source>
<source src="视频路径.mp4"></source>
<source src="视频路径.mp4"></source>
</video>
二、视频元素常用属性
标签元素中属性 <video ?></video>
- controls
显示播放控件（一组按钮：播放、暂停、音量）；
问题：不同浏览器兼容性太差；
解决：可以自定义控制。 - autoplay：自动播放，兼容性太差。
- loop：循环播放
- muted：静音播放
- poster
播放视频之前显示一张图片（广告），如果视频已经播放，则不再显示广告图片。 - preload (metadata / auto / none)
预加载策略，在视频播放之前对视频进行处理。
metadata：预加载视频元数据；
auto：预加载视频元数据并且加载一段时长视频(默认)；
none：不加载任何数据(很少使用)。 - volumn：1 (音量：0~1)
- playbackRate：1
播放速率：大于1，快放；小于1，慢放。 - play() 播放视频
- pause () 暂停播放视频
三、特殊事件
- canplaythrough
当视频加载结束立即触发此事件，表示该视频元素可以播放。 - timeupdate
视频正在播放中(触发多次) - ended
视频播放结束触发此事件 - onplay
视频播放事件 - onpause
视频暂停播放事件
特殊事件中的常用属性
- duration：视频时长(单位/秒)
- currentTime：当前视频播放时间点
- object-fit：fill / contain / cover
fill：拉伸视频填满父元素(视频变形)
contain：包含，保持视频原有比例，不足区域留空白
cover：覆盖，保持视频原有比例，让高度或者宽度有一个与父元素相同
四、示例
<body>
<h1>视频播放</h1>
<video src="x.mp4" id="v3" loop>
您的浏览器版本太低，请升级！！！
</video>
<hr>
<button onclick="f1()">播放</button>
<button onclick="f2()">暂停</button>
<button onclick="f3()">增加音量</button>
<button onclick="f4()">降低音量</button>
<button onclick="f5()">2倍速播放</button>
<button onclick="f6()">0.5倍速播放</button>
<script>
var v3=document.getElementById("v3");
function f1(){v3.play()}
function f2(){v3.pause()}
function f3(){
v3.volume+=0.1;
if(v3.volume>=1){
return;
}
}
function f4(){
v3.volume-=0.1;
if(v3.volume<=0.1){
return;
}
}
function f5(){v3.playbackRate=2}
function f6(){v3.playbackRate=0.5}
</script>
</body>
<style>
body{
text-align: center;
background: #fff;
}
.container{
position: relative;
width: 856px;
height: 480px;
margin: 0 auto;
}
.container #ctrl{
position: absolute;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -60px;
display: none;
}
.container #ctrl img{
width: 120px;
height: 120px;
}
.container #ad{
position: absolute;
width: 300px;
height: 150px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -75px;
display: none;
}
</style>
</head>
<body>
<h3>自定义视频播放控件</h3>
<div class="container">
<video src="res/x.mp4" id="v3"></video>
<img src="res/p3.png" alt="" id="ad">
<a id="ctrl">
<img src="res/play.png" alt="">
</a>
</div>
<script>
var container=document.querySelector(".container");
var ctrl=document.getElementById("ctrl");
var img=document.querySelector("#ctrl img");
var v3=document.getElementById("v3");
//console.log(container,ctrl,img,v3);
//功能一：为按钮绑定单击事件
ctrl.onclick=function(event){
event.preventDefault();
if(v3.paused){
v3.play();
img.src="res/pause.png";
}else{
v3.pause();
img.src="res/play.png";
}
}
//鼠标进入和离开实现按钮的隐藏与显示效果
container.onmouseenter=function(){
ctrl.style.display="block";
}
container.onmouseleave=function(){
ctrl.style.display="none";
}
//添加广告图片，播放视频隐藏广告
var ad=document.getElementById("ad");
v3.onplay=function(){ //视频播放事件
ad.style.display="none"
}
v3.onpause=function(){ //视频暂停事件
ad.style.display="block"
}
</script>
</body>
