vue 点击按钮弹出视频播放+自动播放问题

单纯点击弹出视频代码：

<template><div><button @click="checkVideoFun()">点此观看完整视频</button><!-- 外层的遮罩 v-if用来控制显示隐藏 点击事件用来关闭弹窗 --><div class="mask" v-if="videoState == true" @click="masksCloseFun"></div><!-- 弹窗 --><div class="videomasks" v-if="videoState == true"><!-- 视频：h5的视频播放video --><video :src="videoSrc" controls="controls" autoplay width="100%" height="100%">您的浏览器不支持 video 标签。</video></div></div>
</template>
<script>
export default {data() {return {videoSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11c70c96529b6e6938567ec1aa0910e0.mp4",videoState: false,};},methods: {bofang() {},//点击按钮出现弹窗播放视频checkVideoFun() {this.videoState = true;},masksCloseFun() {this.videoState = false;},},
};
</script>
<style scoped>
.mask {position: fixed;top: 0;left: 0;bottom: 0;right: 0;z-index: 10;background-color: #000000;opacity: 0.6;
}
/* 内容层 z-index要比遮罩大，否则会被遮盖 */
.videomasks {max-width: 1200px;position: fixed;left: 0;top: 50%;margin-top: -30%;z-index: 20;/* transform: translate(-50%, -50%); */
}
</style>

效果图：

还有一种需求：

比如进入页面默认播放视频，如果只有一个autopsy属性不行的，必须要加上一个moted静音播放属性，这样才可以实现进入页面自动播放视频

目前h5手机端微信浏览器是不完全支持视频自动播放的，苹果可以通过代码实现进入页面自动播放视频，安卓必须需要用户点击屏幕才能触发自动播放功能，解决办法就是，在手机端视频最好添加控件功能 controls

苹果解决不能自动播放代码：

<videoautoplayclass="home_videoH5"loopcontrolsmutedsrc="http://xxx"id="ckplayer_a1"x5-video-player-type="h5"preload="metadata"playsinline="true"webkit-playsinline="true"x-webkit-airplay="true"x5-video-orientation="portraint"x5-video-player-fullscreen="true"
></video>

在mounted里面：

document.addEventListener("WeixinJSBridgeReady",function () {var video = document.getElementById("ckplayer_a1");video.play();},false);

video标签的属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
width	pixels	设置视频播放器的宽度。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	URL	要播放的视频的 URL。（我用的网络地址）

vue 点击按钮弹出视频播放+自动播放问题相关推荐

微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
HTML点击按钮弹出对话框（仅代码）
HTML点击按钮弹出对话框的代码(整个网页): <!doctype html> <html> <head><title>无标题文档</title& ...
C# 点击按钮弹出文件选择框
点击按钮弹出文件选择框: // 文件选取这里只允许txt文件private void button1_Click(object sender, EventArgs e){OpenFileDialog ...
【签名】点击按钮弹出签名框,保存成图片,并显示出来
js实现点击按钮弹出签名框(不一定在最下面弹出!) 使用app.js和signature_pad.js生成签名框和保存成图片,此处都是在body的最底部生成img标签: function downlo ...
html 弹窗之后页面变灰色,html点击按钮弹出窗口背景灰掉,点击背景变白退出点击退出也可以...
html点击按钮弹出窗口背景灰掉,点击背景变白退出点击退出也可以 2011-06-10 18:22阅读: 孑孓努力搬砖,养老婆孩子. 关注 function showid(idname){ var ...
uni-app点击按钮弹出提示框
uni-app点击按钮弹出提示框点击事件 <view class="footerbotom_button" @click="ajp">立即支付&l ...
[QT]实现点击按钮弹出图片的效果
点击按钮弹出图片的实现 void MainWindow::btnTest() {QLabel* labelImage = new QLabel(this, Qt::Dialog |Qt::Window ...
vue点击input弹出带搜索键盘并监听该元素
1.遇到问题: 需要做一个点击input弹出带搜索的键盘. 解决: input的type="search",可弹出带搜索的键盘.并监听搜索按钮,请求数据 <input @ke ...
html点击按钮弹出悬浮窗_点击文字或按钮弹出一个DIV窗口（DIV悬浮窗口）
以下是弹出窗口代码: 点击文字弹出一个DIV层窗口代码 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; wi ...

vue 点击按钮弹出视频播放+自动播放问题

单纯点击弹出视频代码：

效果图：

还有一种需求：

苹果解决不能自动播放代码：

video标签的属性：

vue 点击按钮弹出视频播放+自动播放问题相关推荐

最新文章

热门文章