html5视頻常见API插口的实战演练示例

日期:2021-01-19 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

1、尽管有的特性是boolean种类,但依然提议依照XHTML撰写(特性名=”特性值”)文件格式,防止出現不正确 (下面加粗的特性为常见特性)

特性 值 作用叙述 controls controls 是不是显示信息播发控制 autoplay autoplay 设定是不是开启访问器后全自动播发 width Pilex(像素) 设定播发器的宽度 height Pilex(像素) 设定播发器的高宽比 loop loop 设定视頻是不是循环系统播发(即播发完后再次再次播发) preload preload 设定是不是等载入完再播发 src url 设定要播发视頻的url详细地址 poster imgurl 设定播发器原始默认设置显示信息照片 autobuffer autobuffer 设定为访问器缓存方法,不设定autoply才合理

演试:

<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>

2、.video标识API方式:Video标识也出示了较为人的本性化的API插口方式,供写JS时立即启用,便捷简易

API 恶性事件表明 addTextTrack() 向声频/视頻加上新的文字路轨。 play video.play();    播发视頻 pause video.pause();  中止播发视頻 load video.load();   将所有特性回应默认设置值,视頻修复再次刚开始情况 canPlayType var support = videoid.canPlayType('video/mp4');   分辨访问器是不是适用当今种类的视頻文件格式 回到值: 空标识符串:不适用 Maybe:将会适用 Probably:彻底适用

有关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>

3、video标识API特性: Video不但出示了API插口,还出示了很多的API特性,便捷在JS中做分辨,以下:绝大多数特性根据boolean值分辨

API特性 恶性事件表明 duration 回到新闻媒体的播发总时长,企业秒 loop 是不是循环系统播发 muted 是不是静音 paused 是不是中止 currentTime 当今播发時间(企业:秒) volume 声音值(0~1) networkState 回到当今互联网情况 playbackRate 播发的倍速(加快、减速播发)(⑵~2) src 当今视頻源的URL ended 回到当今播发是不是完毕标示 error 回到当今播发的不正确情况 initialTime 回到原始播发的部位 mediaGroup 当今音视頻隶属新闻媒体组 (用来连接好几个音视頻标识) played 当今播发构件早已播发的時间范畴(TimeRanges目标) preload 网页页面载入时是不是另外载入音视頻 readyState 回到当今的提前准备情况 seekable 回到当今可自动跳转构件的時间范畴(TimeRanges目标) audioTracks 回到能用的音轨目录(MultipleTrackList目标) autoplay 新闻媒体载入后全自动播发 buffered 回到缓存构件的時间范畴(TimeRanges目标) controller 回到当今的新闻媒体操纵器(MediaController目标) controls 显示信息播控控制 crossOrigin CORS设定 currentSrc 回到当今新闻媒体的URL defaultMuted 缺省是不是静音 defaultPlaybackRate 播控的缺省倍速 seeking 回到客户是不是做了自动跳转实际操作 startOffsetTime 回到当今的時间偏位(Date目标) textTracks 回到能用的文字运动轨迹(TextTrackList目标) videoTracks 回到能用的视頻运动轨迹(VideoTrackList目标)

演试

<script>
function setting(){
     video1.muted=true;          //设定静音
     video1.volume=0.2;           //设定声音,1等于100%
     video1.playbackRate=2;     //2倍播发速率
     video1.controls=false;    //无法显示播控控制
}
</script>

4、声频/视頻恶性事件

恶性事件 叙述 abort 当声频/视頻的载入已舍弃时开启。 canplay 当访问器能够刚开始播发声频/视頻时开启。 canplaythrough 当访问器可在不因缓存而间断的状况下开展播发时开启。 durationchange 当声频/视頻的时长已变更时开启。 emptied 当现阶段的播发目录为空时开启。 ended 当现阶段的播发目录已完毕时开启。 error 当在声频/视頻载入期内产生不正确时开启。 loadeddata 当访问器已载入声频/视頻确当前帧时开启。 loadedmetadata 当访问器已载入声频/视頻的元数据信息时开启。 loadstart 当访问器刚开始搜索声频/视頻时开启。 pause 当声频/视頻已中止时开启。 play 当声频/视頻已刚开始或已不中止时开启。 playing 当声频/视頻在因缓存而中止或终止后已准备就绪时开启。 progress 当访问器正在免费下载声频/视頻时开启。 ratechange 当声频/视頻的播发速率已变更时开启。 seeked 当客户已挪动/弹跳到声频/视頻中的新部位时开启。 seeking 当客户刚开始挪动/弹跳到声频/视頻中的新部位时开启。 stalled 当访问器尝试获得新闻媒体数据信息,但数据信息不能用时开启。 suspend 当访问器有意不获得新闻媒体数据信息时开启。 timeupdate 当现阶段的播发部位已变更时开启。 volumechange 当声音已变更时开启。 waiting 当视頻因为必须缓存下1帧而终止时开启。

 到此这篇有关html5视頻常见API插口的实战演练示例的文章内容就详细介绍到这了,更多有关html5视頻API插口內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!