JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理

JavaScript027

JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理,第1张

 （1）HTML页面视频标签大体如下

<video id="video"controls="controls">

<source src="./video/2.mp4" type="video/mp4" />

</video>

（2）视频加载后获取视频的长度

varelevideo = document.getElementById("video")

    elevideo.addEventListener('loadedmetadata', function () {//加载数据

        //视频的总长度        console.log(elevideo.duration)

    })

（3）视频开始播放

varelevideo = document.getElementById("video")

    elevideo.addEventListener('play', function () {//播放开始执行的函数

        console.log("开始播放")

    })

（4） 视频正在播放中

varelevideo = document.getElementById("video")

    elevideo.addEventListener('playing', function () {//播放中console.log("播放中")

    })

（5）视频加载中

varelevideo = document.getElementById("video")

    elevideo.addEventListener('waiting', function () {//加载

        console.log("加载中")

    })

（6）视频暂停播放

varelevideo = document.getElementById("video")

    elevideo.addEventListener('pause', function () {//暂停开始执行的函数

        console.log("暂停播放")

    })

（7）视频结束播放

varelevideo = document.getElementById("video")

    elevideo.addEventListener('ended', function () {//结束

        console.log("播放结束")

    }, false)

JS直接使用 JavaScript 来操作即可，需要用原生的JavaScript代码来控制。

举例（例如页面上有1个video）：

<video id="myVideo" src="1.webm" controls />

则对应的脚本代码为：

/* JS代码 */

document.getElementById('myVideo').play()// 播放

document.getElementById('myVideo').pause()// 暂停

/* jQuery代码 */

$('#myVideo').play()// 播放

$('#myVideo').pause()// 暂停

HTML5中的video和audio标签中有一个autoplay属性,添加这个属性后就会在文件加载完成以后自动播放。具体代码如下: video: audio。

构成

文字与图片是构成一个网页的两个最基本的。

元素。你可以简单地理解为：文字，就是网页的内容。图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。

在网页上点击鼠标右键，选择菜单中的 “查看源文件” ，就可以通过记事本看到网页的实际内容。可以看到网页实际上只是一个纯文本文件。它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面。

于是就得到你现在所看到的画面。 为什么在源文件看不到任何图片？ 网页文件中存放的只是图片的链接位置，而图片文件与网页文件是互相独立存放的，甚至可以不在同一台计算机上。

网页通常有以下元素：

文字资料图像档案Applet（在页面内执行的副程式）超链结网页的合成体为网站，一个网站的开始点为首页。

记录功能

当你每次上网时，都会在历史记录里留下记录，并且被保存在浏览器的缓存文件夹里，删除时只要右键删除就可以了。

以上内容参考：百度百科-网页