移动端video的项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
</style>
</head>
<body>
<video>
<source src="2.mp4" type="">
<source src="3.mp4" type="">
<source src="1.mp4">
</video>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#play{
width: 60px;height: 30px;text-align: center;line-height: 30px;border: 1px solid red;background: black;cursor: pointer;
}
</style>
</head>
<body>
<video src="1.mp4" id="video"></video>
<div id="play">播放</div>
<script type="text/javascript">
play.onmousedown=function()
{
return false;//取消默认的事件
}
play.onclick=function()
{
video.play();
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#play{
width: 60px;height: 30px;text-align: center;line-height: 30px;
border: 1px solid black;background: #ccc;
cursor: pointer;
float: left;
}
#time{width: 80px;height: 30px;text-align: center;line-height: 30px;
border: 1px solid black;background: #ccc;float: left;}
</style>
</head>
<body>
<video src='1.mp4' id='video'></video>
<div id='play'>播放</div>
<div id="time"><span id='current'>00</span>/<span id='allTime'>00</span></div>
<script type="text/javascript">
play.onmousedown=function()
{
return false;
}
var kaiguan = false;
setTimeout(function()//获取总时间
{
allTime.innerHTML=video.duration.toFixed(1);
},20);
play.onclick = function(){
if(!kaiguan){
video.play();
play.innerHTML = '暂停';
kaiguan = true;
}
else{
video.pause();
play.innerHTML = '播放';
kaiguan = false;
}
};
video.addEventListener('timeupdate',function()//timeupdate,更新时间
{
current.innerHTML=video.currentTime.toFixed(1);
allTime.innerHTML=video.duration.toFixed(1);
},false);
//思路:播放了就显示暂停文字,并且播放.并且显示下一次的条件
//暂停了就显示播放文字,并且暂停,并且显示下一次的条件
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-10-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读