html5视频常用API接口的实战示例
|
副标题[/!--empirenews.page--]
一、虽然有的属性是boolean类型，但仍旧建议按照XHTML书写（属性名=”属性值”）格式，避免出现错误 （下面加粗的属性为常用属性）
属性
值
功能描述
演示： <video controls="controls" width="500px" height="500px" loop autoplay poster="imgUrl"> <source src=http://www.jb51.net/html5/"黑客之都.mp4" type="video/mp4"/> <track src=http://www.jb51.net/html5/"a.vtt" label="中文" srclang="zh" kind="subtitles" default/> </video> 二、.video标签API方法：Video标签也提供了比较人性化的API接口方法，供写JS时直接调用，方便简单
API
事件说明
关于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=http://www.jb51.net/html5/"黑客之都.Hackerville.S01E01.720P.mp4" type="video/mp4"/> <track src=http://www.jb51.net/html5/"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值判断
API属性
事件说明
演示 （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
