用js如何控制 html5 video的快进后退。不要第三方插件。继续代码。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js如何控制 html5 video的快进后退。不要第三方插件。继续代码。相关的知识，希望对你有一定的参考价值。
代码如下：
<scripttype="text/javascript">functionvidplay() varvideo =
document.getElementById("Video1");varbutton =
document.getElementById("play");if(video.paused)
video.play();
button.textContent ="||";
else
video.pause();
button.textContent =">"
functionrestart() varvideo = document.getElementById("Video1");
video.currentTime = 0;
functionskip(value) varvideo = document.getElementById("Video1");
video.currentTime += value;
</script></head><body><videoid="Video1">// Replace these with your own video files.<sourcesrc="demo.mp4"type="video/mp4"/>
<sourcesrc="demo.ogv"type="video/ogg"/>html5 Video is required for this example.<ahref="demo.mp4">Download the video</a>file.</video><divid="buttonbar">
<buttonid="restart"onclick="restart();">[]</button><buttonid="rew"onclick="skip(-10)"><<</button><buttonid="play"onclick="vidplay()">></button>
<buttonid="fastFwd"onclick="skip(10)">>></button></div>
扩展资料：
注意事项
一、history.pushState(data, title [, url])
往历史记录堆栈顶部添加一条记录；
data: onpopstate事件触发时作为参数传递过去；
title:页面标题，当前所有浏览器都会忽略此参数；
url: 页面地址，可选，缺省为当前页地址；
二、history.replaceState(data, title [, url])
更改当前的历史记录，参数同上；
三、history.state：
用于存储以上方法的data数据，不同浏览器的读写权限不一样；
四、window.onpopstate：响应pushState或replaceState的调用；
HTML实现 后退【window.history.back()】默认
HTML实现 后退【window.history.back(-1)】 括号里面的负数字代表后退几个页面，如果是-2的话就代表后退2页
HTML实现 前进【window.history.forward()】//不常用
HTML实现 前进【window.history.forward(1)】//不常用 括号里面的正数就代表要前进的页。如果是3就表示前进3页
[html] view plain copy
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>这是第一个页面</p>
<a href="HTMLPage2.htm">到dom页</a>
<input type="button" onclick="javascript:window.history.back()" value="后退"/>
<input type="button" onclick="javascript:window.history.forward()" value="前进" />
</body>
</html>
[html] view plain copy
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>这是第二个页面</p>
<a href="HTMLPage3.htm">转到第一页</a>
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.forward()">前进</a>
</body>
</html>
参考技术A 动态抓取video的帧（即图像）到canvas中，即利用canvas来重新绘制视频，将获得的所有图片按位置排列起来，再通过控制canvas中的帧的位置即可实现定点播放、快进快退功能，代码没有，可参看《HTML5高级程序设计》一书中的video介绍一节 参考技术B <scripttype="text/javascript">functionvidplay() varvideo = document.getElementById("Video1");varbutton = document.getElementById("play");if(video.paused)video.play();
button.textContent ="||";
else
video.pause();
button.textContent =">";
functionrestart() varvideo = document.getElementById("Video1");
video.currentTime = 0;
functionskip(value) varvideo = document.getElementById("Video1");
video.currentTime += value;
</script></head><body><videoid="Video1">// Replace these with your own video files.<sourcesrc="demo.mp4"type="video/mp4"/><sourcesrc="demo.ogv"type="video/ogg"/>HTML5 Video is required for this example.<ahref="demo.mp4">Download the video</a>file.</video><divid="buttonbar"><buttonid="restart"onclick="restart();">[]</button><buttonid="rew"onclick="skip(-10)"><<</button><buttonid="play"onclick="vidplay()">></button><buttonid="fastFwd"onclick="skip(10)">>></button></div>
以上是关于用js如何控制 html5 video的快进后退。不要第三方插件。继续代码。的主要内容，如果未能解决你的问题，请参考以下文章