H5的新应用-指定视频的播放进度
Posted 承载梦想-韩旭明
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5的新应用-指定视频的播放进度相关的知识，希望对你有一定的参考价值。
————————————————————————————————
<script type="text/javascript">
//播放/暂停，采用同一个方法实现
function playPause(){
//获取视频DOM元素
var myVideo = document.getElementById("myVideo");
if (myVideo.paused) //判断当前是否处于暂停状态
myVideo.play(); //调用play()方法开发播放
else
myVideo.pause(); //调用pause()方法暂停视频播放
}
//从中间开始播放
function playInMid(){
//获取视频DOM元素
var myVideo = document.getElementById("myVideo");
//得到视频的总时长
var duration = myVideo.duration;
//得到当前的进度
var currentTime = myVideo.currentTime;
//判断是否暂停中
if (!myVideo.paused)
myVideo.pause();
//从总时长的一半的位置开始播放
myVideo.currentTime = duration / 2;
//继续播放视频
myVideo.play();
}
</script>
—————————————————————————————————
<body style="text-align:center">
<!-- html5新增的video标签，用于在网页里嵌入可以播放的视频 -->
<video width="320" height="240" controls="controls" id="myVideo">
<!-- 提供了两种格式的视频文件，以适应不同浏览器对video的支持 -->
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
对不起，您的浏览器暂不支持video视频标签!
</video>
<br/>
<input type="button" value="从头播放" onclick="playPause();"/>
<input type="button" value="从中间播放" onclick="playInMid();"/>
</body>
——————————————————————————————————
以上是关于H5的新应用-指定视频的播放进度的主要内容，如果未能解决你的问题，请参考以下文章
H5移动端自定义video播放控件controls（带播放暂停，进度条拖拽）