2019.9.3视频播放

首先要说的是目前Flash已被HTML5取代,具体取代的方面有:

音频和视频 <video></video> <audio></audio>
绘图 <canvas></canvas>
动画 <canvas></canvas> + 定时器
统计图表 <canvas></canvas> <svg></svg>
客户端数据存储 WebStorage 

今天就来看看视频播放具体是什么样的

视频播放<video></video>

属性有:

autoplay 自动播放
controls 是否显示播放控件,
currentTime 播放到的当前时间
duration 影片的总时长
ended 是否播放到结尾了
loop 是否循环播放
paused 当前是否处于暂停状态

方法有:

play()开始播放
pause()暂停播放

下面我们来用video制作一个可以暂停和播放的播放器,注意不能用controls控件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
1280px;
position: relative;
margin: 50px auto;
}
img{
position: absolute;
left: 1%;
bottom: 1%;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<video src="class/cherryMV.mp4" id="v1" muted></video>
<img src="class/play (2).png">
</div>
<script>
var img = document.getElementsByTagName('img')[0];
var v1 = document.getElementById('v1');
var i = 0;
img.onclick = function(){
if(i%2 == 0){
v1.play();
img.src="class/pause (2).png"
}else{
v1.pause();
img.src="class/play (2).png"
}
i++;
}
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/awei313558147/p/11574727.html