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属性
事件说明
演示 (编辑:航空爱好网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |