赞
踩
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
在移动端的首页用视频做背景动画,让动画循环,自动播放,静音。
<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: 静音
mounted() {
this.init();
},
methods: {
init() {
const el = document.querySelector(".");
if(el.paused) {
el.play();
}
}
},
想要视频默认自动播放,官方建议最好不要使用autoplay:true。
具体解决办法查看如下链接:https://videojs.com/blog/autoplay-best-practices-with-video-js/
vue2下载v5版本
npm i vue-video-player@^5.0.0
在main.js中全局引入
import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
Vue.use(VueVideoPlayer);
<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>
https://blog.csdn.net/xgocn/article/details/90745120
vue-video-player插件默认自动播放的解决办法如下(官网建议的解决办法):https://videojs.com/blog/autoplay-best-practices-with-video-js/
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。