提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
在移动端的首页用视频做背景动画，让动画循环，自动播放，静音。
一、使用步骤
1. html部分
<video @click="init" class="video" :src="require('../../assets/video/pc-all.mp4')"
preload="auto"
poster="../../assets/img/home/pc-all-img.png"
autoplay
loop
muted
playsinline="true"
></video>
属性说明：
playsinline: iPhone safari 中播放只能全屏。在微信端去掉进度条。
poster：默认展示的图片（还没播放视频的时候显示，视频开始播放之后会自动消失）。
preload：预加载视频。
autoplay：自动播放
loop: 循环播放
muted： 静音
2.js部分
mounted() {
this.init();
},
methods: {
init() {
const el = document.querySelector(".");
if(el.paused) {
el.play();
}
}
},
二、使用插件vue-video-player
想要视频默认自动播放，官方建议最好不要使用autoplay:true。
具体解决办法查看如下链接：https://videojs.com/blog/autoplay-best-practices-with-video-js/
1、下载插件
vue2下载v5版本
npm i vue-video-player@^5.0.0
2、使用
在main.js中全局引入
import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
Vue.use(VueVideoPlayer);
3、在组件中使用
<template>
<div class="home-div">
<video-player
id="player"
class="video-player video"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@ready="playerReadied">
</video-player>
</div>
</template>
<script>
export default {
data() {
return {
playerOptions : {
controls: false,
// playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放。 使用player.play()方法进行编程自动播放，避免使用autoplay属性/选项。
muted: true, // 默认情况下将会消除任何音频。 将提高自动播放的更功率。
loop: true, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当 true 时，Video.js player 将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [
{
src: require('../../assets/video/pc-all_15d0e6167d.mp4'), // 路径
type: 'video/mp4' // 类型
}
],
poster: require("../../assets/img/home/pc-all-img.png"), // 封面地址
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖 Video.js 无法播放媒体源时显示的默认信息。
}
};
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
created() {},
mounted() {},
methods: {
// 准备就绪(预加载前会调用)(初始化调用)将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数
playerReadied() {
// this.player.autoplay("true");
const promise = this.player.play();
if (promise !== undefined) {
promise.then(function() {
// Autoplay started!
// alert("播放成功")
}).catch(function(error) {
// Autoplay was prevented.
// alert("播放失败")
});
}
// 微信播放
let that = this;
if (window.WeixinJSBridge) {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
that.player.play()
}, false);
} else {
document.addEventListener("WeixinJSBridgeReady", function () {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
that.player.play()
});
}, false);
}
},
}
};
</script>
<style lang="scss">
// 让首页的视频居中铺满整个屏幕，并且默认的图片铺满整个屏幕
.bg-img-div {
.video {
.video-js {
width: 100%;
height: 100%;
padding-top: 0;
.vjs-tech {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
.vjs-poster {
background-size: cover;
}
}
}
}
</style>
三、最终的版本（自用版本）
虽然官网推荐不使用自动播放，既autoplay: true，但是当autoplay为false时，使用播放方法play()来播放的时候，在QQ浏览器中，视频会脱离文档流，在最顶层播放，并且在所有的控件都显示出来了，属性全部失效。
在playerOptions中默认autoplay: true时，QQ浏览器不会出现这种问题，所以在这里我还是改成默认自动播放，并且在ready()的回调函数中执行了play()方法，确保自动播放失败时使用play()来播放，在回调函数中加了QQ浏览器的判断，当检测到时QQ浏览器时，不调用play()方法。
代码如下：
<template>
<div class="home-div width-full">
<div class="bg-img-div">
<video-player
id="player"
class="video-player video"
ref="videoPlayer"
x-webkit-airplay="allow"
:playsinline="true"
:webkit-playsinline="true"
x5-video-player-type="h5"
x5-playsinline
:options="playerOptions"
@ready="playerReadied">
</video-player>
</div>
</div>
</template>
<script>
export default {
data() {
return {
playerOptions : {
controls: false,
// playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放。 使用player.play()方法进行编程自动播放，避免使用autoplay属性/选项。
muted: true, // 默认情况下将会消除任何音频。 将提高自动播放的更功率。
loop: true, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当 true 时，Video.js player 将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [
{
src: require('../../assets/video/pc-all.mp4'), // 路径
type: 'video/mp4' // 类型
}
],
poster: require("../../assets/img/home/pc-all-img.png"), // 封面地址
// width: document.documentElement.clientWidth,
// height: document.documentElement.clientHeight,
// notSupportedMessage: '', // 允许覆盖 Video.js 无法播放媒体源时显示的默认信息。
},
};
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
created() {},
mounted() {},
methods: {
// 准备就绪(预加载前会调用)(初始化调用)将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数
playerReadied() {
let ua = navigator.userAgent.toLowerCase(), isQQ = false, isQQInstalled = false;
// if(ua.indexOf(' qq') > -1 && ua.indexOf('mqqbrowser') < 0){
// //qq内置浏览器
// isQQInstalled = true;
// return;
// }
if(ua.indexOf('mqqbrowser') > -1 && ua.indexOf(" qq") < 0){
//qq浏览器
isQQ = true;
}
var isAndroid = /Android/i.test(navigator.userAgent)
if(isQQ && isAndroid) {
this.player.autoplay(true);
return;
} else {
setTimeout(() => {
this.player.play();
}, 1000)
}
// 微信播放
let that = this;
if (window.WeixinJSBridge) {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
that.player.play()
}, false);
} else {
document.addEventListener("WeixinJSBridgeReady", function () {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
that.player.play()
});
}, false);
}
},
}
};
</script>
<style lang="scss" scoped>
.home-div {
width: 100%;
height: 100%;
background-color: #000;
position: relative;
bottom: 0;
z-index: 99;
box-sizing: border-box;
overflow: hidden;
.bg-img-div {
width: 100%;
height: 100%;
overflow: hidden;
.video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
display: flex;
align-items: center;
justify-content: center;
}
}
.home-top-div {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
width: 90%;
position: absolute;
top: 2.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 100;
.gf2-logo {
display: flex;
align-items: center;
> img {
width: clamp(180px, 16vw, 400px);
}
}
.r-link {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
.fb-bt2-div {
margin: 0 3px;
>img {
width: clamp(24px, 4vw, 42px);
border: 1px solid #fff;
border-radius: 5px;
cursor: pointer;
&:hover {
border: 1px solid #f26d2f;
background-color: #f26d2f;
}
}
}
.ytb-bt2-div {
margin: 0 3px;
>img {
width: clamp(24px, 4vw, 42px);
border: 1px solid #fff;
border-radius: 5px;
cursor: pointer;
&:hover {
border: 1px solid #f26d2f;
background-color: #f26d2f;
}
}
}
}
}
.bottom-img-div {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
z-index: 200;
margin-bottom: 5%;
width: 54%;
.ex2lium-div {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
>img {
width: 100%;
object-fit: contain;
}
.ex2lium-icon-div {
width: 1.5625rem;
position: absolute;
top: 0;
right: 0;
transform: translateX(100%);
>img {
width: 100%;
object-fit: contain;
}
}
}
}
}
</style>
<style lang="scss">
.bg-img-div {
.video {
.video-js {
width: 100%;
height: 100%;
padding-top: 0;
.vjs-tech {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
.vjs-poster {
background-size: cover;
}
.vjs-loading-spinner {
display: none;
}
.vjs-big-play-button {
display: none;
}
}
}
}
</style>
四、video相关文章推荐
https://blog.csdn.net/xgocn/article/details/90745120
vue-video-player插件默认自动播放的解决办法如下（官网建议的解决办法）：https://videojs.com/blog/autoplay-best-practices-with-video-js/
扫一扫
5121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
