当前位置：首页 > news >正文

【html5的video标签在移动端的使用】【微信内部浏览器video自动播放】【vue-video-player】

news 来源：原创 2024/9/29 1:25:26

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、使用步骤
- 1. html部分
- 2.js部分
二、使用插件vue-video-player
- 1、下载插件
- 2、使用
- 3、在组件中使用
三、最终的版本（自用版本）
四、video相关文章推荐

前言

在移动端的首页用视频做背景动画，让动画循环，自动播放，静音。

一、使用步骤

1. html部分

<video @click="init" class="video" :src="require('../../assets/video/pc-all.mp4')"preload="auto"poster="../../assets/img/home/pc-all-img.png"autoplayloopmutedplaysinline="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: true, // 如果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;return;}var isAndroid = /Android/i.test(navigator.userAgent)if(isQQ && isAndroid) {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>