01、HTML5音视频
2021-04-06 08:25
标签：表示 禁用 api script func 隐藏 val 比例 页面 src：视频的资源地址 controls：视频播放控件 source：可以放如src，如果播放失败，会继续看下一个source video标签的支持格式：mp4、webm、ogv（其中ie8及以下不支持video标签，ie9及以上只支持mp4格式） width：视频的宽度 height：视频的高度 注：两个一起用的话，vieo盒子生效，视频会按比例缩放到最中间的位置 autoplay：自动播放（在chrom浏览器中，默认被禁用） loop：循环播放 poster：视频封面，没有播放时显示的图片 muted：视频默认静音状态（在chrom浏览器中设置autoplay和muted后，发现autoplay生效了） play() pause() duration currentTime src volume controls muted networkState //返回video上面的网络状态 0、未初始化 1、视频已经选区好资源，但是未使用网络 2、浏览器正在下载视频资源 3、未找到视频资源（一开始获取不到需要页面都加载完毕之后才能获取到（可以尝试用setTimeout）） currentSrc //返回音视频的地址（必须是在音视频可以加载播放的时候才能返回，而且不能赋值） 01、HTML5音视频 标签：表示 禁用 api script func 隐藏 val 比例 页面 原文地址：https://www.cnblogs.com/mingliangge/p/12499145.htmlvideo
video controls>
//当video里面省略src时，video里面可以插入多个source，当第一个source的格式不支持时，接着使用第二个source...
source src="xxx.mp4">source>
source src="xxx.webm">source>
source src="xxx.ogv">source>
您的浏览器不支持播放这个视频
//当所有的source都不支持时，显示这句话
video>
video API 事件
script type="text/javascript">
//code...
script>
//让视频播放
var div = document.getElementById(‘dd‘);
div.play();
//让视频暂停
var div = document.getElementById(‘dd‘);
div.pause();
//返回视频的总长度（以秒的形式）。一开始获取不到需要页面都加载完毕之后才能获取到（可以尝试用setTimeout）
setTimeout(function(){
console.log(div.duration);
},100);//100毫秒后执行
//设置/返回当前视频的长度 （以秒为单位）
console.log(div.currentTime); //返回当前已经播放了的视频长度
div.currentTime = 30; //把当前的视频长度设置为30秒
//设置/返回视频的来源
div.src = "http://www.soscw.com/xxx.mp4"; //更改或设置当前视频的src
console.log(div.src); //返回当前视频的来源
//设置/返回当前的音量大小(0-1)
div.volume = 0.5; //设置当前音量为一半
console.log(div.volume); //返回当前的音量大小
//可以尝试用input的range类型来控制
//设置视频是否显示播放控件
div.controls = true; //true表示显示控件，false表示隐藏控件
//设置视频是否静音
div.muted = true; //true表示静音，false表示非静音
下一篇：各种网站