H5新特性之video audio

1.标签

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

 

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

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

转载于:https://www.cnblogs.com/amiezhang/p/7875275.html

你可能感兴趣的:(H5新特性之video audio)