Vue实现画中画播放视频

使用vue实现画中画(小窗口播放)的功能

html页面代码:

1
2

<video src="http://q9ktbyjw1.bkt.clouddn.com/DARK%20SOULS%20III%202019_4_28%2011_16_57.mp4" id='video' width="100px" height='100px' controls="controls" autoplay='autoplay' muted loop='loop'>您的浏览器不支持video标签</video>
<button @click="into">{{mymsg}}</button>

参数:

data(){
return {
mymsg: '进入画中画模式'
}
}

函数:

into:function(){

if (video !== document.pictureInPictureElement) {
// 尝试进入画中画模式
video.requestPictureInPicture();
this.mymsg = '退出画中画';
} else {
// 退出画中画
document.exitPictureInPicture();
this.mymsg = '进入画中画';
}
}

这样会自动进入画中画模式，进入后会在视频旁边提示退出画中画模式。