html5视频常用API接口的实战示例_html5_网页制作
这篇文章主要介绍了html5视频常用API接口的实战示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、虽然有的属性是boolean类型，但仍旧建议按照XHTML书写（属性名=”属性值”）格式，避免出现错误 （下面加粗的属性为常用属性）
演示：
<video controls="controls" width="500px" height="500px" loop autoplay poster="imgUrl">
<source src="黑客之都.mp4" type="video/mp4"/>
<track src="a.vtt" label="中文" srclang="zh" kind="subtitles" default/>
</video>
二、.video标签API方法：Video标签也提供了比较人性化的API接口方法，供写JS时直接调用，方便简单
关于video标签的API接口在JS中用法如下：
<!DOCTYPE HTML>
<html>
<head>
<style>
video::cue{
background-color:transparent;
color:white;
font-size:20px;
line-height: 100px;
}
</style>
</head>
<body>
<video controls="controls" id="video1">
<source src="黑客之都.Hackerville.S01E01.720P.mp4" type="video/mp4"/>
<track src="a.vtt" label="中文字幕" srclang="zh" kind="subtitles" default/>
</video>
<button onclick="isPlay(this)">播放</button>
<button onclick="replay()">重新播放</button>
<button onclick="isPlayType()">浏览器支持</button>
<script>
var video1 = document.getElementById("video1"); //括号内为video标签的id
//播放视频（点击播放按钮，后变成暂停）
function isPlay(obj1){
if(video1.paused){ //paused属于视频api属性
obj1.innerHTML="暂停";
video1.play();
}else{
obj1.innerHTML="播放";
video1.pause();
}
}
//重新从开头播放
function replay(){
video1.load();
}
//判断要播放的视频格式当前浏览器是否支持
function isPlayType(){
var support = video1.canPlayType("video/mp4");
console.log(support); //返回结果：空字符串、maybe（可能支持）、probably（支持）
}
</script>
</body>
</html>
三、video标签API属性： Video不仅提供了API接口，还提供了许多的API属性，方便在JS中做判断，如下：大部分属性通过boolean值判断
演示
<script>
function setting(){
video1.muted=true; //设置静音
video1.volume=0.2; //设置音量,1等于100%
video1.playbackRate=2; //2倍播放速度
video1.controls=false; //不显示播控控件
}
</script>
四、音频/视频事件
到此这篇关于html5视频常用API接口的实战示例的文章就介绍到这了,更多相关html5视频API接口内容请搜索3399IT网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持3399IT网！
本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com
