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