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

相关推荐
桂月二二20 分钟前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062062 小时前
ubuntu向一个pc主机通过web发送数据，pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb2 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角2 小时前
CSS 颜色
前端·css
浪浪山小白兔3 小时前
HTML5 新表单属性详解
前端·html·html5
lee5763 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579653 小时前
AI赋能Flutter开发：ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
limit for me4 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架
浏览器爱好者4 小时前
如何构建一个简单的React应用？
前端·react.js·前端框架
qq_392794484 小时前
前端缓存策略：强缓存与协商缓存深度剖析
前端·缓存
热门推荐
01centos7 init.d 和system.d02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04xgboost: Why not implement distributed XGBoost on top of spark05(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明06密码学原理技术-第六章-introduction to pulibc-key cryptography07PyTorch AMP 混合精度中grad_scaler.py的scale函数解析08Windows10安装PCL1.14.0及点云配准09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10如何实现抖音直播弹幕抓取（PHP版本）