H5新特性之video audio
H5 特性 Video Audio
2023-09-14 09:00:17 时间
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属性。