本文目录
用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》
html5中的history api能兼容ie7吗
个例子，当用户从首页进入帮助页面时，我们通过Ajax来加载帮助页面的内容。然后这个用户又转到产品页面，我们需要再一次通过Ajax请求来替换页面的内容。当用户想分享页面的URL时，通过History API，我们可以改变页面的URL来反应内容的修改，这样不管是用户分享还是保存的URL都能和页面的内容对应起来。
基本知识
要查看这个API提供了哪些功能非常简单，打开浏览器的Developer Tools工具面板，然后在console中输入history。如果你的浏览器支持History API，你将会看到这个对象下面附带了很多方法。
注意其中的pushState和replaceState这两个方法。我们可以在console中进行一些简单的测试，来看看当我们使用这两个方法时URL会发生什么变化。稍后我们将分析这两个方法中的所有参数，现在我们只需要关注最后一个参数：
history.replaceState(null, null, ’hello’);
上面代码中的replaceState方法改变了当前页面的URL，在后面添加了一个’/hello’。不过并没有发出任何request请求，当前窗口仍然停留在之前的页面。不过这里有个问题，当你点击浏览器的后退按钮时，页面并不会回退到我们通过replaceState方法修改之前的那个URL，而是直接回退到了上一个页面（即我们进入到这个页面之前的那个页面）。这是因为replaceState方法不会修改浏览器的history，它只是简单地替换了地址栏中的URL。
要解决这个问题我们需要使用pushState方法：
history.pushState(null, null, ’hello’);
