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属性。
时间: 2024-10-04 18:37:12