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

Min_Fox2024-06-21 0:35

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

文章目录

前言

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

一、使用步骤

1. html部分

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部分

javascript 复制代码 
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中全局引入

javascript 复制代码 
import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
Vue.use(VueVideoPlayer);

3、在组件中使用

javascript 复制代码 
<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()方法。

代码如下：

javascript 复制代码 
<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>
html 复制代码 
<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/

相关推荐
Json_181790144807 分钟前
电商拍立淘按图搜索API接口系列，文档说明参考
前端·数据库
风尚云网30 分钟前
风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020432 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing34 分钟前
React核心功能详解（一）
前端·react.js·前端框架
捂月38 分钟前
Spring Boot 深度解析：快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能，觊觎（Edge）浏览器的内置截（长）图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理： 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示