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

html5标签video audio

2024-10-05 23:11:39   216人阅读

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

 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


联系
我们