目录
1、需求:点击播放按钮时,按钮消失,视频开始播放;点击视频时,视频暂停,按钮出现。
HTML5 Video(视频):HTML5 Video(视频) | 菜鸟教程
一、H5 video的使用
修改后的正常代码(样式不全,请自己添加):
<template>
<div>
<div @click="onShowPlayBtn">
<video
ref="oneVideo"
width="800px"
height="455px"
controls
:poster="preImg"
:src="videoSrc"
>
<source/>
</video>
<button
v-if="showPlayBtn"
@click.stop="onChangePlayState"
/>
</div>
<ul>
<li
v-for="(item, idx) in list"
:key="item.title"
@click="selectVideoPlay(idx)"
>
<span :class="{'isClick':currentVideoNumber==idx}">
{{item.title}}
</span>
</li>
</ul>
</div>
</template>
<script>
data(){
return {
currentIdx: 0,
showPlayBtn: true,
list: [
{
title: 'Bin正在大杀特杀',
preImg: '---',
src: '---',
},
{
title: 'IG输了',
preImg: '---',
src: '---',
},
{
title: 'RNG成为永远的回忆',
preImg: '---',
src: '---',
},
]
}
},
computed: {
preImg() {
// console.log('----current_preimg', this.list[this.currentIdx].preImg);
return this.list[this.currentIdx].preImg;
},
videoSrc() {
// console.log('----current_url', this.list[this.currentIdx].src);
return this.list[this.currentIdx].src;
}
},
methods: {
// 切换视频,更换标题
selectVideoPlay(index){
this.currentVideoNumber = index;
var myVideo = this.$refs.oneVideo;
if(myVideo.played){
this.showPlayBtn = true;
myVideo.pause();
}
},
// 显示播放暂停按钮
onShowPlayBtn(){
this.showPlayBtn = !this.showPlayBtn;
},
// 控制视频播放暂停
onChangePlayState() {
// 这里使用了ref,尽量避免document.getElementById之类的直接操作DOM,以提高性能
var myVideo = this.$refs.oneVideo
if(myVideo.paused){
this.showPlayBtn = !this.showPlayBtn;
myVideo.play();
}else{
this.showPlayBtn = !this.showPlayBtn;
myVideo.pause();
}
},
}
</script>
<style>
.isClick{
color: #FC9153;
}
// ...
</style>
二、问题及解决
1、需求:点击播放按钮时,按钮消失,视频开始播放;点击视频时,视频暂停,按钮出现。
问题描述:
点击视频暂停时,视频暂停一下立即又自动播放了,而且按钮没有出现。
问题解决:
单独写个方法onShowPlayBtn(),控制button标签的显示隐藏。
2、需求:通过JS可以切换video的src视频源。
问题描述:
视频并没有变化,视频源没有切换。
问题解决:
将视频资源直接添加到video标签的src属性上,而不是添加给source标签。
3、poster 无法自适应video大小
给Video标签设置即可:
style="width: 100%; height: 100%; object-fit: fill"
4、如何去掉点击视频后的默认边框?
outline: none;
5、去除video的...(包括画中画和下载功能)
在 video 中添加 controlslist='nodownload' 和 disablepictureinpicture 。
<video
ref="oneVideo"
width="800px"
height="455px"
controls
:poster="preImg"
:src="videoSrc"
controlslist='nodownload'
disablepictureinpicture
>
<source/>
</video>
【推荐阅读】浏览器中的画中画(Picture-in-Picture)模式及其 API - 知乎
6、播放按钮兼容移动端
video 在移动端会默认自带一个播放按钮,所以,要把针对 pc 端自定义的播放按钮在兼容的时候,屏蔽掉。
<button
class="play_btn_style"
v-if="showPlayBtn"
@click.stop="onChangePlayState"
/>
@media (max-width: 768px) {
.play_btn_style {
display: none;
}
}