H5新特性之video audio

Posted 2020-10-15 张啊咩

1.标签

<video src="~~~" autoplay loop controls poster="~~~.jpg">
    你的浏览器不支持video~~
</video>

 

值得注意的就是这几个属性，autoplay（自动播放）、loop（循环播放）、controls（默认视频操作控件）、poster(封面)

2.js接口

//播放、暂停
video.paused?video.play():video.pause();

// 音量、静音
video.volume += x; // 1>x>0;
video.muted = true; //true就是静音

//播放速度
video.playbackRate = x; //x是倍数

//视频当前时间、总时间
video.currentTime; 
video.duration;

//全屏播放（非标准）
video.webkitRequsetFullScreen();
video.webkitExitFullScreen();//退出全屏

//时间改变事件
video.addEventListener(‘timeupdate‘,function(){
   //当video.currentTime发生变化时触发    
})

 

当然还有一些常用事件例如‘canplay’、‘waiting’、‘ended‘、‘error’。

 ps:audio和video的操作是一模一样的，但是audio没有video的poster属性。