vue-video-player动态更新视频地址

<div class="video" v-if="isVideoVisible"><video-playerref="videoPlayer":options="playerOption":playsinline="true"></video-player></div>

一开始设置playerOption的时候不要给 sources[0].src 赋视频地址：

data() {return {playerOption: {sources: [{type: "video/mp4",src: ""}],height: '480',autoplay: true,muted: true,language: 'zh-CN',playbackRates: [0.7, 1.0, 1.5, 2.0],controls: true,},}},

当在某处需要启用视频时，再将视频的地址赋值给 source[0].src 即可：

this.playerOption.sources[0].src = "xxxxxx.mp4";

接下来制作一个可用点击触发视频播放的demo:

关闭视频弹出的按钮图标：

<template><div class="main-page"><div class="button" @click="watchVideo">点我观看视频</div><div class="video" v-if="isVideoVisible"><img src="assets/img/close.png" @click="handleVideoVisible"><video-playerref="videoPlayer":options="playerOption":playsinline="true"></video-player></div></div>
</template>
<script>export default {name: "MyVideoPlayer",data() {return {playerOption: {sources: [{type: "video/mp4",src: ""}],height: '480',autoplay: true,muted: true,language: 'zh-CN',playbackRates: [0.7, 1.0, 1.5, 2.0],controls: true,},isVideoVisible: false,}},methods: {handleVideoVisible() { // 控制视频弹窗开关this.isVideoVisible = !this.isVideoVisible;},watchVideo() { //打开视频this.isVideoVisible = true;this.playerOption.sources[0].src = "https://www.runoob.com/try/demo_source/movie.mp4";}}}
</script>
<style lang="scss" scoped>.button {width: 5vw;height: 3vh;top: 10vh;left: 20vw;color: #ffffff;background-color: rgba(0, 120, 220, .8);border-radius: 10px;cursor: pointer;position: absolute;padding: 4px 4px;}.video {top: 0;width: 100vw;height: 100vh;position: absolute;background-color: rgba(0, 0, 0, .5);z-index: 111;display: flex;flex-direction: column;justify-content: center;align-items: center;}img {position: absolute;top: 0;right: 0;}@media screen and (min-width: 750px) {img {width: 36px; height: 36px;}}@media screen and (max-width: 750px) {img {width: 24px; height: 24px;}}
</style>

最终效果：

vue-video-player动态更新视频地址相关推荐

seo vue 动态路由_基于vue.jsvue-router的动态更新TDK（SEO优化）
本文基于工作项目开发,做的整理笔记前几天帮朋友解决这个问题,顺带学习了一下,做个笔记Mark下. 前提条件: 你已经了解并使用vue,能够搭建应用站点. 编码环境: system:OS X EI C ...
如果给video标签动态写入视频？
在给video 标签写入视频时,不能根据图片写入一样,把视频的路径写入到src中,需要把<sorce> 写到video 中, <video id="play"& ...
从blob协议的加密视频地址下载视频
目标下载视频地址:blob:http://www.yunxiedu.net/2be908de-216b-4b57-badb-1d3be699e077 如下图视频还是弹窗网页视频: I (1)安装插件浏 ...
vue渲染动态渲染图片_动态/动态渲染视频和音频
vue渲染动态渲染图片 Vue-Viaudio (vue-viaudio) Dynamically/Reactively render videos and audios. 动态/动态渲染视频和音频. ...
vue 如何实现点击动态更新图形验证码
一.vue 点击动态更新图形验证码在验证码的图片上,绑定点击事件 getCaptcha(),同时使用 ref 指明图形验证码的引用对象,代码如下所示: <section class=" ...
动态更新阿里云DDNS解析记录的IPv6地址，随时随地用域名远程访问自己的电脑【如何远程访问家里的电脑】
远程访问电脑日志简介要求 1. 获取两台电脑 2.IPv6网络 2.1检查光猫 2.2检查路由器 2.3配置电脑防火墙 2.3.1添加ICMPv6协议 2.3.2配置SMB协议 2.4配置远程桌 ...
Unity流水账2：视频播放之Video Player
VideoPlayer组件使用VideoPlayer组件可以将视频文件附加到GameObjecs,并在运行时,在GameObject的Texture上播放它们. 默认情况下,Video Pl ...
vue在使用element时使用video视频地址切换视频动态改变
vue在使用element时使用video视频地址切换视频动态改变今天用vue在写element的table时,在table中使用video动态渲染,但是渲染上的视频地址修改后,发现之前的视频还在, ...
vue项目中videoPlayer 的 src 视频地址参数动态修改---方法
方法很简单:相信大家的问题应该是改变src的值吧,动态赋值这一步简单. this.playerOptions['sources'][0]['src'] 就是这一步解决提取src问题,主要部分用*号框起 ...

vue-video-player动态更新视频地址

vue-video-player动态更新视频地址相关推荐

最新文章

热门文章