video加载完成jquery

转载

岁月如歌甚好 2025-01-06 01:06:56

文章标签 video加载完成jquery ui ide 数据预加载 文章分类 jQuery 前端开发

视频或音频数据是否预加载，如果使用预加载，浏览器会预先将视频或音频数据进行缓冲。

preload 值 none、metadata 、auto（默认）

none ：不进行预加载

metadata：只有预加载媒体的元数据（媒体字节数，第一帧，播放列表，持续时间等）

auto：预加载全部视频或者音频

原文地址：

<video id="myVideo" controls preload="auto" width=300 height="165" 
        poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" 
        src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">
</video>

var myVideo = document.getElementById('myVideo');

</script>

事件：

1、事件处理方式

第一种是监听的方式，addEventListener对事件的发生进行监听。

第二种是获取事件句柄。<video id=”” src=”” οnplay=”begin()”></video>

2、事件介绍

Video元素与audio元素的相关事件

事件	描述
loadstart	浏览器开始在网上寻找媒体数据
progress	浏览器正在获取媒体数据
suspend	浏览器暂停获取媒体数据，但是下载过程中并没有正常结束
abort	浏览器在下载完全部媒体数据之前中止获取媒体数据，但是并不是由错误引起的
error	获取媒体数据过程中出错
emptied	暂不考虑，可以网上看
stalled	浏览器尝试获取媒体数据失败
play	即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay
pause	播放暂停，当执行了pause方法触发
loadedmetadata	浏览器获取完媒体的时长和字节数
loadeddata	浏览器已加载完毕当前播放位置的媒体数据，准备播放
waiting	可以暂不看
playing	正在播放
canplay	浏览器能够播放媒体，但估计以当前播放速率不能直接将媒体播完，播放期间需要缓冲
canplaythrough	浏览器能够播放媒体，但估计以当前播放速率能将媒体播完，不再需要缓冲
seeking	Seeking变为true，表示浏览器正在请求数据
seeked	Seeking属性变为false，表面浏览器停止请求数据
timeupdate	当前播放位置发生改变，可能是播放过程中的自然改变，也可能是人为改变，或由于播放不能连续而发生的跳变。
ended	播放结束后停止播放
ratechange	DefaultplaybackRate属性或playbackRate属性发生改变
durationchange	播放时长发生改变
volumechange	volume属性或muted属性发生改变

第一、获取影片总时长

要获取总时长，要用到video的一个事件 loadedmetadata，这个事件的触发表示元数据（媒体的一些基本信息）已经加载完成，用addEventListener监听事件，需要注意的是获取到的总时长单位为秒

myVideo.addEventListener('loadedmetadata',function(){
    var tol=myVideo.duration //获取总时长，单位为s
})

第二、获取影片的播放时间和设置播放点

//获取影片的播放时间，视频播放时，控制台不断输出视频当前时间

myVideo.addEventListener("timeupdate", function(){

//获取当前播放时间

console.log(currentTime);//在调试器中打印

})

//设置播放点

如果修改的位置上没有可用的媒体数据，将抛出INVALID_STATE_ERR异常

myVideo.currentTime = num;

3、音量的获取和设置

音量的范围值是0~1，一般在UI中都是用百分比，所以需要的时候要进行转换。

//获取当前音量
myVideo.addEventListener("volumeChange",function(){
var volume=myvideo.volume //获得当前音量
})
//设置音量
function setVol(num){
　　myVideo.volume=num;
}

4、属性

原文地址：http://www.alixixi.com/web/a/2015051294738.shtml

canPlayType方法：使用canPlayType方法来测试浏览器是否支持指定的媒体类型。该方法定义如下：var support = myVideo.canPlayType(type);type为播放文件的MIME类型，可以加上表示媒体编码格式的codes参数

返回值：

空字符串：表示浏览器不支持此种媒体类型。

maybe：表示浏览器可能支持此种媒体类型。

probably：表示浏览器确定支持此种媒体类型。

<video id="video" controls width=640 height=360>
    <source src="Wildlife/Wildlife.ogv" type="video/ogg; codecs="theora, vorbis""/>
    <source src="Wildlife/Wildlife.webm" type="video/webm" >
    <source src="Wildlife/Wildlife.mp4" type="video/mp4">
    <p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<script>
    var myVideo=document.getElementById('video');
    var support = myVideo.canPlayType("video/webm");
    console.log(support); // maybe
    var support = myVideo.canPlayType("video/ogg; codecs=theora, vorbis");
    console.log(support); // probably
</script>

defaultPlaybackRate属性：可以使用video元素或者audio元素的defaultPlaybackRate属性读取或修改媒体默认的播放速率。

playbackRate属性：可以使用video元素或者audio元素的playbackRate属性读取或修改媒体当前的播放速率。

muted:使用video元素或audio元素的muted属性读取或修改媒体的静音状态，该值为布尔值，true表示处于静音状态，false表示处于非静音状态。
played：video元素或audio元素的played属性来返回一个TimeRanges对象，从该对象中可以读取媒体文件的已播放部分的时间段。开始时间为已播放部分的开始时间，结束时间为已播放部分的结束时间。

paused属性：使用video元素或audio元素的paused属性来返回一个布尔值，表示是否处于暂停播放中，true表示媒体暂停播放，false表示媒体正在播放；

ended属性：使用video元素或audio元素的ended属性来返回一个布尔值，表示是否播放完毕，true表示媒体播放完毕，false表示媒体还没有播放完毕。

load方法：使用load方法来重新载入媒体进行播放，自动将元素的playbackRate属性的值变为defaultPlaybackRate属性的值，自动将元素的error的值变为null。

networkState属性

在媒体数据加载过程中可以使用video元素或audio元素的networkState属性读取当前网络状态，共有4个可能的值；

1． NETWORK_EMPTY（数字值为0）：元素处于初始状态。

2． NETWORK_IDLE(数字值为1)，浏览器已选择好用什么编码格式来播放媒体，但是尚未建立网络连接。

3． NETWORK_LOADING(数字值为2)：媒体数据加载中

4． NETWORK_NO_SOURCE(数字值为3)，没有支持的编码格式，不执行加载。

error属性：

在正常读取时候，使用媒体数据的过程中，video元素或audio元素的error属性为null，但是任何时候只要出现错误，error属性将返回一个MediaError对象，该对象的code返回对应的错误状态，共有4个可能值：

MEDIA_ERR_ABORTED(数字值为1)，媒体数据的下载过程由于用户的操作原因而被终止。
MEDIA_ERR_NETWORK(数字值为2)，确认媒体资源可用，但是在下载出现网络错误，媒体数据的下载过程被中止。
MEDIA_ERR_DECODE(数字值为3)，确认媒体资源可用，但是解码时发生错误。
MEDIA_ERR_SRC_NOT_SUPPORTED(数字值为4)，媒体资源不可用或媒体格式不被支持

myVideo.addEventListener('error',function(){

switch(myVideo.error.code) {
         case 1:
            alert("视频的下载过程被中止");
         break;

         case 2:
            alert("网络发生故障，视频的下载过程被中止");
         break;

         case 3:
            alert("解码失败");
         break;

         case 4:
            alert("媒体资源不可用或媒体格式不被支持");
         break;
　　　　　　default:
            alert('发生未知错误')
     }