video 属性和事件用法大全

（1） video属性

<!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --><video src="test.mp4" controls width="400" height="300"></video><!-- 禁止下载 --><video src="test.mp4" controls controlslist="nodownload" width="400" height="300"></video><!-- 禁止下载，禁止全屏 --><video src="test.mp4" controls controlslist="nodownload nofullscreen" width="400" height="300"></video><!-- 自动播放 （不同浏览器的表现不一样） --><video src="test.mp4" controls autoplay width="400" height="300"></video><!-- 默认静音播放（可手动点开继续播放） --><video src="test.mp4" controls muted width="400" height="300"></video><!-- 循环播放 --><video src="test.mp4" controls loop width="400" height="300"></video><!-- 预加载 --><video src="test.mp4" controls preload width="400" height="300"></video><!-- 贴图 --><video src="test.mp4" poster="poster.jpg" controls width="400" height="300"></video><!-- 音量控制 --><video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_volume"></video><script>var video = document.getElementById('_volume')video.volume = 2 // 取值范围：0 到 1，0 是静音，0.5 是一半的音量，1 是最大音量（默认值）</script><!-- 播放时间控制 --><video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_time"></video><script>var video = document.getElementById('_time')console.log(video.currentTime)  // 视频当前正在播放的时间（单位：s），进度条拖到哪就显示当前的时间video.currentTime = 60  // 默认从60秒处开始播放</script><!-- 播放地址切换 （常见于切换超清  高清 流畅，不同画质的视频地址不同） --><video src="test.mp4" controls autoplay width="400" height="300" id="_src"></video><script>var video = document.getElementById('_src')console.log(video.src)     // http://127.0.0.1:8001/test.mp4   绝对地址，DOM 中是相对地址// video.src = 'test-2.mp4'   // 直接替换掉了原来的视频srcsetTimeout(() => {video.src = 'test-2.mp4'  // 播放到第 30s 的时候，自动切换视频}, 30000)</script><!-- 备用地址切换 --><video controls autoplay width="400" height="300" id="_source"><source src="test3.mp4" type="video/mp4" /><source src="test9.mp4" type="video/mp4" /><source src="test-2.mp4" type="video/mp4" /></video><script>var video = document.getElementById('_source')setTimeout(() => {console.log(video.currentSrc)     // http://127.0.0.1:8001/test.mp4}, 1000)// HTTP 载入失败，状态码 404。媒体资源 http://127.0.0.1:8001/test3.mp4 载入失败。// HTTP 载入失败，状态码 404。媒体资源 http://127.0.0.1:8001/test9.mp4 载入失败。// http://127.0.0.1:8001/test-2.mp4// 当第一段视频加载失败时，自动加载下一段视频

（2）video 事件

<video src="test.mp4" controls width="400" height="300" id="video"></video><script>var video = document.getElementById('video')// 1、loadstart：视频查找。当浏览器开始寻找指定的音频/视频时触发，也就是当加载过程开始时video.addEventListener('loadstart', function(e) {console.log('提示视频的元数据已加载')console.log(e)console.log(video.duration)            // NaN})// 2、durationchange：时长变化。当指定的音频/视频的时长数据发生变化时触发，加载后，时长由 NaN 变为音频/视频的实际时长video.addEventListener('durationchange', function(e) {console.log('提示视频的时长已改变')console.log(e)console.log(video.duration)           // 528.981333   视频的实际时长（单位：秒）})// 3、loadedmetadata ：元数据加载。当指定的音频/视频的元数据已加载时触发，元数据包括：时长、尺寸（仅视频）以及文本轨道video.addEventListener('loadedmetadata', function(e) {console.log('提示视频的元数据已加载')console.log(e)})// 4、loadeddata：视频下载监听。当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时触发video.addEventListener('loadeddata', function(e) {console.log('提示当前帧的数据是可用的')console.log(e)})// 5、progress：浏览器下载监听。当浏览器正在下载指定的音频/视频时触发video.addEventListener('progress', function(e) {console.log('提示视频正在下载中')console.log(e)})// 6、canplay：可播放监听。当浏览器能够开始播放指定的音频/视频时触发video.addEventListener('canplay', function(e) {console.log('提示该视频已准备好开始播放')console.log(e)})// 7、canplaythrough：可流畅播放。当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时触发video.addEventListener('canplaythrough', function(e) {console.log('提示视频能够不停顿地一直播放')console.log(e)})// 8、play：播放监听video.addEventListener('play', function(e) {console.log('提示该视频正在播放中')console.log(e)})// 9、pause：暂停监听video.addEventListener('pause', function(e) {console.log('暂停播放')console.log(e)})// 10、seeking：查找开始。当用户开始移动/跳跃到音频/视频中新的位置时触发video.addEventListener('seeking', function(e) {console.log('开始移动进度条')console.log(e)})// 11、seeked：查找结束。当用户已经移动/跳跃到视频中新的位置时触发video.addEventListener('seeked', function(e) {console.log('进度条已经移动到了新的位置')console.log(e)})// 12、waiting：视频加载等待。当视频由于需要缓冲下一帧而停止，等待时触发video.addEventListener('waiting', function(e) {console.log('视频加载等待')console.log(e)})// 13、playing：当视频在已因缓冲而暂停或停止后已就绪时触发video.addEventListener('playing', function(e) {console.log('playing')console.log(e)})// 14、timeupdate：目前的播放位置已更改时，播放时间更新video.addEventListener('timeupdate', function(e) {console.log('timeupdate')console.log(e)})// 15、ended：播放结束video.addEventListener('ended', function(e) {console.log('视频播放完了')console.log(e)})// 16、error：播放错误video.addEventListener('error', function(e) {console.log('视频出错了')console.log(e)})// 17、volumechange：当音量更改时video.addEventListener('volumechange', function(e) {console.log('volumechange')console.log(e)})// 18、stalled：当浏览器尝试获取媒体数据，但数据不可用时video.addEventListener('stalled', function(e) {console.log('stalled')console.log(e)})// 19、ratechange：当视频的播放速度已更改时video.addEventListener('ratechange', function(e) {console.log('ratechange')console.log(e)})</script>

video 属性和事件用法大全相关推荐

video标签的属性和事件用法大全
1.video 属性 <video src="test.mp4& ...
CSS3 box-shadow属性设置阴影效果用法大全
CSS3 box-shadow 属性用来向边框添加一个或多个阴影效果,该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值.可选的颜色值以及可选的 inset 关键词来规定,省略长度的值是 0. ...
[Delphi]ListView基本用法大全
Delphi ListView基本用法大全 //增加项或列(字段) ListView1.Clear; ListView1.Columns.Clear; ListView1.Columns.Add; L ...
Delphi ListView基本用法大全
Delphi ListView基本用法大全 //增加项或列(字段) ListView1.Clear; ListView1.Columns.Clear; ListView1.Columns.Add; L ...
C#学习（十五）——窗体控件用法大全
C#控件及常用设计整理 1.窗体 1.1.常用属性** (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2) WindowState属性: 用来获取或设置窗 ...
【ADB 操作命令详解及用法大全（非常全）】
ADB操作命令详解及用法大全一.ADB是什么? ADB,即 Android Debug Bridge 是一种允许模拟器或已连接的 Android 设备进行通信的命令行工具,它可为各种设备操作提供 ...
史上最全面的 ADB命令及用法大全
史上最全面的 ADB命令及用法大全 ADB Usage Complete / ADB 用法大全 https://mazhuang.org/awesome-adb/ ADB,即 Android De ...
MVC中HtmlHelper用法大全
MVC中HtmlHelper用法大全参考解析MVC中HtmlHelper控件7个大类中各个控件的主要使用方法(1) 2012-02-27 16:25 HtmlHelper类在命令System.Web ...
C# ASP.NET MVC HtmlHelper用法大全
C# ASP.NET MVC HtmlHelper用法大全 (原文) HTML扩展类的所有方法都有2个参数: 以textbox为例子 public static string TextBox( thi ...

video 属性和事件用法大全

（1） video属性

（2）video 事件

video 属性和事件用法大全相关推荐

最新文章

热门文章