html5 与视频

1.视频支持格式。

有3种视频格式被浏览器广泛支持:.ogg,.mp4,.webm.

Theora+Vorbis=.ogg  (Theora:视频编码器,Vorbis:音频编码器)

H.264+$$$=.mp4 (H.264:高清视频标准)

VP8+Vorbis=.webm(webm是新的开源视频标准,基于VP8编码器)

平台 .ogg .mp4 .webm
Andorid  ❌  
FirFox  ❌    ❌
Chrome  ❌    ❌
iPhone    ❌  
IE9    ❌  
Opera  ❌    ❌
Safari    ❌  

可见,没有任何一个格式能够支持所有浏览器,所以我们需要引入3中格式的视频。

<video id="ivideo" width="320" height="640">

<source src="test.webm" type='video/webm;codecs="vp8,vorbis"'>

<source src="test.mp4" type='video/mp4;codecs="arc1.42E01E,mp4a.40.a"'>

<source src="test.ogg" type='video/ogg;codecs="thera,vorbis"'>

</video>

2.video属性

autoplay:true or false;是否自动播放

loop:true or false;是否循环播放

volume:0~1数字;播放音量

poster:加载视频时显示的图片url。

duration:视频长度(s)

currentTime:视频当前播放时间(s)

ended:根据视频是否播放结束,返回true or false,

muted:查询播放中的视频是否静音,返回true or false

paused:查询视频当前是否被暂停,返回true or false

方法:

play():启动播放

pause():暂停

3.预加载视频

为视频加载添加预加载动画

<div id="preload">0%</div>

这里要知道两个htmlvideo元素的事件:

progress:在视频对象更新加载进度时触发该事件,用于更新进度文字

canplaythrough:在视频已加载足够播放全部视频数据时触发,用于确定什么时候播放视频。

load事件firefox不支持,chrome&ie10不触发progress事件

监听加载百分比函数:

function progress(){
var loadingStatus=document.getElementById("loadingstatus");
var videoEle=document.getElementById("ivideo");
var percent=parseInt((videoEle.buffered.end(0)/videoEle.duration)/100);
loadingStatus.innerHtml=percent+'%';
}

4.js判断浏览器可用视频格式

video的另一个方法:canPlayType(),返回一个文本字符串:maybe,probably,''

function supportVideoType(video){

 var returnType="";

 if(video.canPlayType("video/webm")=="probably"||video.canPlayType("video/webm")=="maybe"){

 returnType="webm"; 

}else if(video.canPlayType("video/mp4")=="probably"||video.canPlayType("video/mp4")=="maybe"){

 returnType="mp4"; 

}else if(video.canPlayType("video/ogg")=="probably"||video.canPlayType("video/ogg")=="maybe"){

 returnType="ogg"; 

}

return returnType;

  

使用标签方式引入video只能支持播放、暂停等功能,如果需要旋转、添加文字等特殊效果,则需要和canvas一起使用。

上一篇:用25行JavaScript语句实现一个简单的编译器


下一篇:Power BI官方视频(3) Power BI Desktop 8月份更新功能概述