首页 > 代码库 > html5标签video audio

html5标签video audio

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

 preload 值 none、metadata 、auto(默认)

none :不进行预加载

metadata:只有预加载媒体的元数据(媒体字节数,第一帧,播放列表,持续时间等)

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

本文目录:

1、获取影片总时长

2、获取影片已播放时间和设置播放点

3、音量的获取和设置

4、属性

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

<script>

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

</script>

第一、获取影片总时长

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

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

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

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

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

  var currentTime = myVideo.currentTime;//获取当前播放时间

    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、属性

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个可能值:

  1. MEDIA_ERR_ABORTED(数字值为1),媒体数据的下载过程由于用户的操作原因而被终止。
  2. MEDIA_ERR_NETWORK(数字值为2),确认媒体资源可用,但是在下载出现网络错误,媒体数据的下载过程被中止。
  3. MEDIA_ERR_DECODE(数字值为3),确认媒体资源可用,但是解码时发生错误。
  4. 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(‘发生未知错误‘)
    }
},false)

html5标签video audio