【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/

相关推荐
小码哥_常1 天前
Spring Boot配置diff：解锁配置管理新姿势
前端
小码哥_常1 天前
告别onActivityResult！Android数据回传的3大痛点与终极解决方案
前端
hhcccchh1 天前
1.2 CSS 基础选择器、盒模型、flex 布局、grid 布局
前端·css·css3
修己xj1 天前
Markdown 里写公式，别只知道 LaTeX！试试 HTML 标签，简单到飞起
html
专吃海绵宝宝菠萝屋的派大星1 天前
使用Dify对接自己开发的mcp
java·服务器·前端
爱分享的阿Q1 天前
Rust加WebAssembly前端性能革命实践指南
前端·rust·wasm
蓝黑20201 天前
Vue的 value=“1“ 和 :value=“1“ 有什么区别
前端·javascript·vue
小李子呢02111 天前
前端八股6---v-model双向绑定
前端·javascript·算法
He少年1 天前
【基础知识、Skill、Rules和MCP案例介绍】
java·前端·python
史迪仔01121 天前
[QML] QML IMage图像处理
开发语言·前端·javascript·c++·qt
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南04OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南07实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了08Oh My Codex 快速使用指南09UV安装并设置国内源10开发者环境配置：用 Ollama 实现本地大模型部署(附下载慢的解决方案