JS video视频标签的相关操作

JavaScript022

JS video视频标签的相关操作,第1张

elevideo.addEventListener('loadedmetadata', function () { 

    //加载数据//视频的总长度console.log(elevideo.duration) 

 })

elevideo.addEventListener('play', function () { 

    //播放开始执行的函数console.log("开始播放") 

 })

elevideo.addEventListener('playing', function () { 

    //播放中 console.log("播放中")

})

elevideo.addEventListener('waiting', function () {

     //加载console.log("加载中") 

 })

elevideo.addEventListener('pause', function () {

     //暂停开始执行的函数console.log("暂停播放") 

 })

elevideo.addEventListener('ended', function(){

     //结束console.log("播放结束") 

 }, false)

代码如下：

<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>