一、使用插件video.js
遇到问题：点击背景视频无法触发播放和暂停的操作
问题原因：在移动端使用video.js与fastclick 冲突
解决方式：修改fastclick的源码文章来源：https://www.toymoban.com/news/detail-557687.html
FastClick.prototype.needsClick = function(target) {
switch (target.nodeName.toLowerCase()) {
// Don't send a synthetic click to disabled inputs (issue #62)
case 'button':
case 'select':
case 'textarea':
if (target.disabled) {
return true;
}
break;
case 'input':
// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
if ((deviceIsIOS && target.type === 'file') || target.disabled) {
return true;
}
break;
case 'label':
case 'iframe': // iOS8 homescreen apps can prevent events bubbling into frames
case 'video':
return true;
}
// 修改源码的地方
return ((/\bneedsclick\b/).test(target.className) || (/\bvjs/).test(target.className));
// return (/\bneedsclick\b/).test(target.className);
};
二、 使用自定义video满足ui设计的需求
解决方案：自定义进度条、全屏操作
实际代码：文章来源地址https://www.toymoban.com/news/detail-557687.html
<template>
<div id="lkk">
<div id="title">
<span class="tit-span" @click="back"></span>
<span class="tit-text">{{ title }}</span>
</div>
<div id="aa">
<div class="progress">
<div class="progress_bg" @touchstart.prevent="handleTap($event)">
<div class="progress_bar" ref="progressBar"></div>
</div>
<div
class="progress_btn"
ref="progressBtn"
@touchstart.prevent="handleStart($event)"
@touchmove="handleMove($event)"
@touchend="handleEnd($event)"
></div>
</div>
<div @click.stop="enableMute" class="mymuted needsclick">
<img v-if="showVoi" src="../assets/muted.png" width="100%" height="100%" alt="" />
<img v-else src="../assets/voice.png" width="100%" height="100%" alt="" />
</div>
<div id="full" class="needsclick" @click.stop="changeFull"></div>
</div>
<img
id="videoPalse"
ref="videoPalse"
:class="{ active: isFullScreen }"
:src="videoImg"
@click="play"
alt
/>
<video
:src="videoUrl"
height="100%"
width="100%"
preload="auto"
autoplay
:poster="poster"
webkit-playsinline="true"
playsinline="true"
x-webkit-airplay="allow"
x5-video-player-type="h5"
x5-video-orientation="landscape"
id="vid"
ref="vids"
class="needsclick"
@click="play"
></video>
</div>
</template>
<script>
import "../lib/flexible";
// import { Indicator } from "mint-ui";
export default {
data() {
return {
videoUrl: this.$route.query.url,
poster: this.$route.query.poster,
portraint: "portraint",
title: "",
isFullScreen: false,
videoImg: "",
showVoi: true,
isTit: false, //是否显示头部
videoBox: "",
nowAudioTime: "", // 当前播放进度
x1: 0,
y1: 0,
oldTime: 0,
newTime: 0,
olfLeft: 0,
newLeft: 0,
nowLeft: 0,
progressWidth: 0,
current_time: 0,
vids:'',
progressBar:"",
progressBtn:"",
progress:''
};
},
async mounted() {
const that = this;
that.vids = document.getElementById("vid");
that.progressBar = document.querySelector(".progress_bar");
that.progressBtn = document.querySelector(".progress_btn");
that.progress = document.querySelector(".progress");
let vids = that.vids
that.progressWidth = that.progress.offsetWidth;
vids.addEventListener("timeupdate", that.videoTime);
// vids.addEventListener("seeking", function(e) {
// console.log("开始移动进度条");
// vids.pause();
// });
// // 11、seeked：查找结束。当用户已经移动/跳跃到视频中新的位置时触发
// vids.addEventListener("seeked", function(e) {
// console.log("进度条已经移动到了新的位置");
// vids.play();
// });
vids.muted = true;
vids.play();
},
created() {},
methods: {
videoTime(){
const that = this;
let percent = this.vids.currentTime / this.vids.duration;
that.progressBar.style.width = percent * 100 + "%";
that.progressBtn.style.left = percent * 100 + "%";
},
handleTap(e) {
e.preventDefault();
const that = this;
let progressWidth = that.progressWidth;
let touches = e.changedTouches;
that.x1 = that.isFullScreen ? touches[0].pageY : touches[0].pageX;
let per = that.x1 / progressWidth;
that.nowAudioTime = that.vids.duration * per;
that.vids.currentTime = that.nowAudioTime;
},
handleStart(e) {
const that = this;
e.preventDefault();
var touches = e.changedTouches;
that.x1 = that.isFullScreen ? touches[0].pageY : touches[0].pageX;
that.olfLeft = that.progressBtn.offsetLeft;
that.vids.pause();
that.pause = true;
},
handleMove(e) {
const that = this;
e.preventDefault();
let progressWidth = that.progressWidth;
let vids = that.vids;
let x2 = that.isFullScreen ? e.changedTouches[0].pageY : e.changedTouches[0].pageX;
that.newLeft = x2 - that.x1;
that.nowLeft = that.olfLeft + that.newLeft;
if (that.nowLeft < 0) {
that.nowLeft = 0;
}
if (that.nowLeft > progressWidth) {
that.nowLeft = progressWidth;
}
that.progressBar.style.width = (that.nowLeft / progressWidth) * 100 + "%";
that.progressBtn.style.left =
((that.nowLeft - (that.nowLeft > progressWidth - 10 ? 10 : 5)) / progressWidth) * 100 + "%";
let per = that.nowLeft / progressWidth;
that.nowAudioTime = vids.duration * per; //音频应该显示的时间
that.current_time = that.nowAudioTime;
vids.currentTime = that.nowAudioTime;
},
handleEnd(e) {
const that = this;
// touch.removeEventListener("touchmove", handleEnd, false);
that.vids.currentTime = that.nowAudioTime;
this.vids.play();
that.pause = false;
},
resetWidth() {
this.$nextTick(function() {
this.progressWidth = this.progress.offsetWidth;
});
},
enableMute() {
this.vids.muted = !this.vids.muted;
this.showVoi = !this.showVoi;
},
changeFull() {
if (this.isFullScreen) {
this.changeSet()
} else {
this.changeSet('width')
}
},
back() {
if (this.isFullScreen) {
this.changeSet()
} else {
window.appAction("goBack");
}
},
changeSet(width){
this.resetWidth();
let myVideo = this.vids;
let aa = document.getElementById("aa");
let title = document.getElementById("title");
let w = document.documentElement.clientWidth || document.body.clientWidth;
let h = document.documentElement.clientHeight || document.body.clientHeigth;
let cha = width?Math.abs(h - w) / 2:0;
let data = width?(w - 25) / 2 + cha:0;
let dataY = width?(h - 46) / 2:0;
let dataY2 = width?(h -40) /2:0
let titleData = width?`${((h + 40) / 2 - w)>0?'-':''}${Math.abs((h + 40) / 2 - w)}`:0;
myVideo.width = width?h:w;
myVideo.height = width?w:h;
myVideo.style.zIndex = 2000;
myVideo.style.transform = `translate(-${cha}px,${cha}px) rotate(${width?90:0}deg)`;
this.isFullScreen = width?true:false;
aa.style.width = `100${width?'vh':'vw'}`;
aa.style.transform = `translate(-${data}px,-${dataY}px) rotate(${width?90:0}deg)`;
title.style.width = `100${width?'vh':'vw'}`;
title.style.transform =`translate(${titleData}px,${dataY2}px) rotate(${width?90:0}deg)`;
},
play() {
let myVideo = this.vids;
if (myVideo.paused) {
myVideo.play();
this.videoImg = "";
this.$refs.videoPalse.style.display = "none";
this.isTit = false;
} else {
myVideo.pause();
this.videoImg = require("../assets/mm02.png");
this.$refs.videoPalse.style.display = "block";
this.isTit = true;
}
}
},
beforeDestroy() {
this.vids.removeEventListener('timeupdate',this.videoTime,false)
},
};
</script>
<style lang="less" scoped>
* {
touch-action: none;
}
#lkk {
width: 100vw;
height: 100vh;
overflow: hidden;
background: #000;
}
#aa {
width: 100%;
height: 24px;
z-index: 2000001;
position: fixed;
left: 0;
bottom: 10px;
/* background: #666; */
border-radius: 4px;
display: flex;
align-items: center;
padding: 0 16px;
box-sizing: border-box;
/* justify-content: center; */
}
.progress {
position: relative;
flex: 1;
}
.progress_bg {
overflow: hidden;
height: 2px;
background: rgba(255, 255, 255, 0.2);
}
.progress_bar {
height: 2px;
background: #5493db;
width: 0;
}
.progress_btn {
width: 11px;
height: 11px;
background: #5493db;
border-radius: 50%;
position: absolute;
left: 0px;
margin-left: -4px;
top: -5px;
cursor: pointer;
box-sizing: border-box;
}
.aa {
flex: 1;
height: 4px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.2);
}
#bb {
width: 0;
height: 4px;
border-radius: 4px;
background: #5493db;
display: inline-block;
}
#full {
color: #fff;
width: 0.48rem;
height: 0.4rem;
background: url(../assets/full.png) no-repeat center;
background-size: 100% 100%;
margin-left: 0.2rem;
}
.mymuted {
display: flex;
width: 0.48rem;
height: 0.4rem;
margin-left: 0.43rem;
img {
width: 0.48rem;
height: 0.4rem;
max-width: 100%;
}
}
#vid {
position: absolute;
left: 0;
top: 0;
}
#title {
height: 40px;
line-height: 40px;
width: 100%;
color: #fff;
position: relative;
z-index: 300000;
/* box-sizing: border-box; */
/* background: red; */
display: flex;
align-items: center;
}
#title .tit-span {
background: url(../assets/mm07.png) no-repeat center center;
height: 0.8rem;
width: 0.6rem;
background-size: 0.586rem;
border: 0;
}
#title .tit-span {
color: #000;
}
#videoPalse {
position: absolute;
z-index: 9999;
width: 1.28rem;
height: 1.28rem;
top: 50%;
left: 50%;
margin-top: -0.64rem;
margin-left: -0.64rem;
display: none;
}
.active {
transform: rotate(90deg);
}
.video-desc {
position: absolute;
bottom: 1rem;
color: #fff;
padding: 0 0.3rem;
display: flex;
flex-direction: column;
z-index: 9999;
> p {
font-size: 0.37rem;
line-height: 0.6rem;
}
> span {
color: #9b9da9;
font-size: 0.293rem;
margin-top: 0.1rem;
line-height: 0.5rem;
}
}
</style>
到了这里，关于video.js的坑点和自定义video的播放、全屏、快进操作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
