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

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

文章目录

  • 前言
  • 一、使用步骤
    • 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>

四、video相关文章推荐

https://blog.csdn.net/xgocn/article/details/90745120

vue-video-player插件默认自动播放的解决办法如下(官网建议的解决办法):https://videojs.com/blog/autoplay-best-practices-with-video-js/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/856448.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux运维工作常用命令

命令 --help //可以快速查看命令的用法及其各种选项 cat /etc/passwd //查看所有用户 who //查看已登录用户 sudo useradd 用户名 …

首个AI高考评测结果出炉,GPT-4o排名第二

近日&#xff0c;上海人工智能实验室利用其自主研发的“司南”评测体系OpenCompass&#xff0c;对国内外多个知名大模型进行了一场特殊的“高考”。这些来自阿里巴巴、智谱AI、Mistral等机构&#xff0c;以及OpenAI的GPT-4o等“考生”&#xff0c;接受了新课标I卷“语数外”的全…

百万级 QPS 接入层网关架构方案演进

文章目录 前言1、单机架构2、DNS 轮询3、Nginx 单机4、Nginx 主备 Keepalived5、LVS 主备 Keepalived Nginx 集群6、LVS 主备 Keepalived Nginx 集群 DNS 轮询 前言 随着PC、移动互联网的快速发展&#xff0c;越来越多的人通过手机、电脑、平板等设备访问各种各样APP、网…

找不到com.fasterxml.jackson.core.exc.StreamWriteException的类文件

1. 前言: 使用springboot搭建的项目, 需要使用 jackson 更改json文件的内容; maven管理jar包, 导入jar包版本信息如下: <!-- 读写json文件所需依赖 --> <dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databin…

C++语法06 格式化输出及保留小数点后指定位数

格式化输出 格式化输出所用的函数为 printf&#xff0c;它可以输出任意位数的小数。 使用格式&#xff1a;printf(“%.nf”,a)。这句话的作用是将变量a保留n位小数输出。 注意事项&#xff1a; 1、这里的n&#xff0c;需要具体化为一个数字&#xff0c;保留几位小数&#x…

【ARMv8/v9 GIC 系列 3 -- GIC 的 类型寄存器 GICD_TYPER】

文章目录 GIC 类型寄存器 GICD_TYPERESPI_Range, 位[31:27]RSS, 位[26]No1N, 位[25]A3V, 位[24]IDBits, 位[23:19]DVIS, 位[18]LPIs, 位[17]MBIS, 位[16]NUM_LPIs, 位[15:11]SecurityExtn, 位[10]NMI, 位[9]ESPI, 位[8]CPUNumber, 位[7:5]ITLinesNumber, 位[4:0]GIC 类型寄存器…

GDB调试助手用法详解

什么是GDB GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具。或许&#xff0c;各位比较喜欢那种图形界面方式的&#xff0c;像VC、BCB等IDE的调试&#xff0c;但如果你是在 UNIX平台下做软件&#xff0c;你会发现GDB这个调试工具有比VC、BCB的图形化调试器更强大的功能…

朗科HD10M2Pr震撼上市,自带风扇极速降温,匹敌私有云

近日,存储领域的领军企业朗科旗下全资子公司朗科创新宣布,其最新款磁吸硬盘盒HD10M2Pr正式上市。这款产品凭借超薄设计、极速降温、高速传输等多项优势,迅速成为了行业内的讨论焦点。 随着移动设备使用的普及和短视频内容的日益丰富,对于存储空间不断增长的需求逐渐成为日常生活…

liquibase 错误: 无法打开扩展控制文件 “c:/postgresql/14/share/extension/timescaledb.control“

背景 运行springboot项目时&#xff0c;在一开始运行liquibase部分报错&#xff0c;报错信息如题所示&#xff0c;经查&#xff0c;是因为安装postgresql时没有安装这个名为timescaledb的扩展&#xff0c;所以接下来就是安装timescaledb扩展。 安装timescaledb扩展 我的电脑…

Semaphroe + CountDown

Semaphore 基本使用 synchronized 可以起到锁的作用&#xff0c;但某个时间段内&#xff0c;只能有一个线程允许执行 Semaphore&#xff08;信号量&#xff09;用来限制能同时访问共享资源的线程上限&#xff08;不是资源数&#xff09;&#xff0c;非重入锁 不像之前的reen…

rsync同步目录脚本

假设有两台服务器的示例 IP 地址为&#xff1a; Server A: 192.168.1.100Server B: 192.168.1.200 现在来解释如何使用这个脚本进行服务器之间文件夹内容的同步&#xff0c;保留路径和服务器信息的抽象化。 1. 脚本文件位置和权限 假设脚本文件位于 /root/script.sh&#x…

Hadoop面试题总结

一 、介绍一下hadoop 综述:hadoop是一个适合海量数据的分布式存储和分布式计算的平台 分述:hadoop包含三大组件&#xff0c;分别是HDFS、MapReduce和YARN --HDFS(分布式文件系统) HDFS集群由NameNode,DataNode,SecondaryNameNode构成NameNode&#xff1a;主要负责接受用户请求…

XML 应用程序

XML 应用程序 XML&#xff08;可扩展标记语言&#xff09;是一种用于存储和传输数据的标记语言。它是一种自我描述的语言&#xff0c;允许用户定义自己的标签和文档结构。XML广泛应用于各种应用程序中&#xff0c;包括网站开发、数据交换、文档管理等。本文将探讨XML的一些主要…

导入导出带下拉框模版(EasyExcel)

前言 项目进行到新的一个迭代了&#xff0c;赶了1周需求&#xff0c;接口终于处理完了。分享记录下迭代中处理导入、导出、下载模版功能的细节吧。 一、场景 EasyExcel&#xff08;阿里&#xff09;实现Excel数据处理三层表头&#xff0c;第二、三层表头动态数据根据第二、三层…

RabbitMQ(六)仲裁队列、流式队列、异地容灾(联邦队列Federation Queue)

文章目录 仲裁队列1、创建交换机2、创建仲裁队列3、验证主节点宕机不影响消息发送和接收 流式队列&#xff08;不推荐&#xff0c;Kafka主场&#xff09;概念 异地容灾一、Federation插件概述 二、Federation交换机1、总体说明2、准备工作3、启用联邦插件4、添加上游连接端点5、…

NetSuite Inventory Transfer Export Saved Search

用户之前有提出一个实际的需求&#xff0c;大致意思是想要导出Inventory Transfer的相关明细行信息&#xff0c;且要包含From Location&#xff0c;To Location&#xff0c;Quantity等信息。 我们知道From Location和To Location在IT Form中应该是在Main的部分&#xff0c;在D…

java学习--集合(大写一.1)

看尚硅谷视频做的笔记 1.集合框架概述 1.1生活中的容器 首先知道集合是来解决什么问题的&#xff1f; 1.1.1内存层面需要针对于多个数据进行存储&#xff0c;此时&#xff0c;可以考虑的容器有&#xff1a;数组、集合类 对于内存层面的来说&#xff0c;断电后数据就不复存…

后端学习笔记:Python基础

后端学习笔记&#xff1a;Python基础 数据类型&#xff1a; Python中主要有以下几种常用的基本数据类型&#xff1a; String 字符串类型&#xff0c;用单引号或者双引号引用Number 数字类型&#xff0c;包括浮点数&#xff0c;整数&#xff0c;长整数和复数List 列表项&…

Python polars学习-06 Lazy / Eager API

背景 polars学习系列文章&#xff0c;第6篇 Lazy / Eager API Lazy&#xff1a; 延迟、惰性 Eager&#xff1a; 即时、实时 该系列文章会分享到github&#xff0c;大家可以去下载jupyter文件&#xff0c;进行参考学习 仓库地址&#xff1a;https://github.com/DataShare-duo/…

界面构件开发之RC文件

代码; #include <gtk-2.0/gtk/gtk.h> #include <gtk-2.0/gdk/gdkkeysyms.h> #include <glib-2.0/glib.h> #include <stdio.h>int main(int argc, char *argv[]) {gtk_init(&argc, &argv);gtk_rc_parse("./mainrc");GtkWidget *winN…