video标签自动播放视频 vue + js
<div style="width:100%;"><video autoplay="autoplay" controls="" width='100%' id="screenVideo" muted="" playsinline="true" ref="video" src="https://cloud.video.taobao.com//play/u/588191357/p/1
·
<div style="width:100%;">
<video autoplay="autoplay" controls="" width='100%' id="screenVideo" muted="" playsinline="true" ref="video" src="https://cloud.video.taobao.com//play/u/588191357/p/1/e/6/t/1/347960533659.mp4" style="object-fit:fill" webkit-playsinline="true" width="100%" x-webkit-airplay="allow" x5-video-orientation="portraint" x5-video-player-fullscreen="true" x5-video-player-type="h5">
</video>
<div>
</div>
</div>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
window.onload = function() {
undefined
var local1 = document.getElementById('screenVideo'); //获取,函数执行完成后local内存释放
local1.play();
document.addEventListener(
"WeixinJSBridgeReady",
function() {
local1.play();
},
false
);
document.addEventListener(
"YixinJSBridgeReady",
function() {
local1.play();
},
false)
setTimeout(() => {
local1.pause()
local1.load()
}, 10)
local1.autoplay = true; // 自动播放
local1.loop = true; // 循环播放
local1.muted = true; // 关闭声音,如果为false,视频无法自动播放
if (local1.paused) { //判断是否处于暂停状态
local1.play(); //开启播放
}
}
</script>
vue 版本
<template>
<div id="myvideo">
<video id="screenVideo" muted ref="video" controls autoplay="autoplay" src="https://cloud.video.taobao.com//play/u/588191357/p/1/e/6/t/1/347960533659.mp4" webkit-playsinline="true"
x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline="true"
x5-video-orientation="portraint" style="object-fit:fill">
</video>
</div>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
export default {
data() {
return {
_dom: "",
videoImg: './components/assets/playbtn.png',
playStatus: true,
isMute: true,
isPlay: false,
autoplay: "true"
}
},
props: {
videoSrc: {
type: String
}
},
mounted() {
window.onload = function() {
undefined
var local1 = document.getElementById('screenVideo'); //获取,函数执行完成后local内存释放
local1.play();
document.addEventListener(
"WeixinJSBridgeReady",
function() {
local1.play();
},
false
);
document.addEventListener(
"YixinJSBridgeReady",
function() {
local1.play();
},
false)
setTimeout(() => {
local1.pause()
local1.load()
}, 10)
local1.autoplay = true; // 自动播放
local1.loop = true; // 循环播放
local1.muted = true; // 关闭声音,如果为false,视频无法自动播放
if (local1.paused) { //判断是否处于暂停状态
local1.play(); //开启播放
}
}
},
methods: {
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)