首页 > 代码库 > html5 与视频

html5 与视频

2024-08-23 19:06:27   222人阅读

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="http://www.mamicode.com/test.webm" type=‘video/webm;codecs="vp8,vorbis"‘>

<source src="http://www.mamicode.com/test.mp4" type=‘video/mp4;codecs="arc1.42E01E,mp4a.40.a"‘>

<source src="http://www.mamicode.com/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一起使用。

 

html5 与视频


联系
我们