【H5】 video音频标签:
多媒体标签 video
< video src=""> </ video>
- src :引入路径
- autoplay : 自动播放
- width : 宽
- height : 高
- controls: 控件
- preload: 是否等到加载再播放
- Autobuffer: 缓存
<video
src='mp4/v.f30.mp4'
width='500'
height="500"
controls
loop
preload=""
Autobuffer>
您的浏览器不支持 HTML 5 Video标签,请升级浏览器
</video>
video控制属性:
1. oVideo.muted : 控制音频样式是否为静音:
true 为静音效果
false 有音效果
2. oVideo.volume : 控制声音
默认为100% / 1
静音值为 0
取值范围 0 - 1
3. oVideo.currentTime : 视频当前播放时间
4. oVideo.duration : 视频总时间
5. oVideo.pause(); 视频暂停
6. oVideo.play(); 视频播放
<video
src='mp4/v.f30.mp4'
width='500'
height="500"
controls
loop
preload=""
Autobuffer>
您的浏览器不支持 HTML 5 Video 标签,请升级浏览器
</video>
<button> 播放 </button>
<script>
let oVideo = document.getElementsByTagName('video')[0]; //获取视频标签
let btn = document.querySelector('button'); //获取按钮标签
let mark = false; //控制播放暂停
// oVideo.muted = false; //视频静音
oVideo.volume = 0; //控制音量0~1
btn.onclick = function(){
if( mark ){
oVideo.pause(); //视频暂停
this.innerHTML = "播放"
console.log( oVideo.duration ) //获取视频的总时间
console.log( oVideo.currentTime ) //获取视频播放时的时间
}else{
oVideo.play(); //视频播放
this.innerHTML = "暂停"
console.log( oVideo.duration )
console.log( oVideo.currentTime )
}
mark = !mark;
}
console.log( oVideo.muted ) //静音false 有声true
console.log( oVideo.volume ) //输出音量0~1
</script>
source视频兼容
<!-- source标签内写多种格式的视频便于兼容不同浏览器 -->
<video
width='500'
height="500"
controls
loop
preload=""
Autobuffer>
<source src='mp4/v.f30.ogg' type="video/ogg" />
<source src='mp4/v.f30.ogv' type="video/ogv" />
您的浏览器不支持 HTML 5 Video 标签,请升级浏览器。
</video>