video标签

视频做为背景

css:

			#videoBg {
				position: fixed;
				/* 在页面的最底层显示 */
				z-index: -1;
			}
			@media (min-aspect-ratio: 16/9) {
				#videoBg {
					width: 100%;
					height: auto;
				}
			}
			@media (max-aspect-ratio: 16/9) {
				#videoBg {
					width: auto;
					height: 100%;
				}
			}

HTML:

		<video id="videoBg" poster="" autoplay muted loop >
			<source src="" type="video/mp4"></source>
		</video>

标签内属性

src 为视频地址

poster 用于视频为加载完成时显示的图片，一般为视频的第一帧画面

autoplay 自动播放

muted 静音播放 （谷歌浏览器下必须要加上才能播放）

loop 循环播放

controls 显示播放控件

属性

duration 返回视频的总时长 单位为秒

const videodemo = document.getElementById("videoBg");
videodemo.addEventListener('loadeddata',function(){ //视频加载完毕触发
    console.log(videodemo.duration);
})

currentTime 设置或返回视频的当前播放事件，单位也是秒

volume 设置或返回视频的音量，0 ~ 1

ended 视频是否播放完毕

paused 设置或返回视频是否暂停 true false

playbackRate 设置视频的播放速度

this.myvideo.playbackRate = 10

video的方法

play() 视频播放

pause() 视频暂停

const videodemo = document.getElementById("videoBg");
document.querySelector('.bf').onclick=function(){
	videodemo.play()
}
document.querySelector('.zt').onclick=function(){
	videodemo.pause()
}

事件

loadstart 视频开始加载

loadeddata 视频加载完成

videodemo.addEventListener('loadeddata',function(){
	console.log("视频加载完成");
})

canplay 当浏览器判断视频可以播放时触发

error 视频加载错误触发

play 视频开始播放时触发

pause 视频暂停时触发

timeupdate 播放中，当播放进度发生改变时触发(在播放中持续触发)

videodemo.addEventListener("timeupdate",function(){
	console.log("播放进度为:"+videodemo.currentTime);
})

volumechange 当视频

全屏方法

    toggleFullScreen(event){
      const myvideo = this.$refs.myvideo;
      let isFullscreen = document.webkitIsFullScreen || document.fullscreen;
      if(!isFullscreen) {
        const inFun = myvideo.requestFullscreen || myvideo.webkitRequestFullScreen;
        inFun.call(myvideo)
      } else {
        const exitFun = document.exitFullscreen || document.webkitExitFullscreen;
        exitFun.call(document); 
      }
    }

画中画

document.requestPictureInPicture(); //开启画中画

document.exitPictureInPicture(); //关闭画中画