vue播放视频使用原生video标签基本功能（不含样式）

直接上代码：

<template><div style="display: flex"><!--  原生video标签，controls表示为可控制视频暂停、跳跃、播放  --><video id="media" class="media" height="600" width="900" controls :src="videoList[videoNow]"></video><div><!-- :class和index判断正在播放哪一个，并改变颜色  --><div v-for="(item,index) in videoName" @click="changeVideo(index)" :class="{showNow:index === videoNow}">{{item}}</div></div></div>
</template><script>export default {name: "VideoShow",data(){return{//记录正在播放哪一个videoNow:0,//存放视频url数组videoList:[],//存放视频名称数组videoName:[]}},mounted() {this.getVideos()this.goNext()},methods:{//模拟获取视频url网络请求getVideos(){this.videoList=['url0','url1','url2','url3','url4','url5']this.videoName=['name0','name1','name2','name3','name4','name5']},//切换视频changeVideo(index){this.videoNow = index},//自动播放下一个和准备就绪就播放goNext(){const that = thislet media = document.getElementById("media");//监听视频准备完毕马上播放，不需要可以注释  media.oncanplay = function(){media.play()};//监听播放完成后马上播放下一个，不需要可以注释  media.addEventListener('ended',function(){//判断视频url数量,播放完最后一个自动播放第一个if(that.videoNow < that.videoList.length-1){that.videoNow++}else {that.videoNow = 0}});}}
}
</script><style scoped>
.media{background-color: black;
}
.showNow{color: pink;
}
</style>

功能都在注释中解释了。把模拟获取视频url网络请求的getVideos换成你自己的请求或者写成静态的就可以了。如果是本地文件建议使用相对定位。

额外功能包括了自动播放和自动跳跃下一条视频。方法都很基本，很容易理解。

具体样式根据你的需求修改，代码中只体现出了播放对应视频时视频对应名改变颜色。

vue播放视频使用原生video标签基本功能（不含样式）相关推荐

python 打开网页自动播放视频_html5的video标签自动播放
JMeter使用文档 JMeter使用文档 1.JMeter安装步骤 1.1Windows环境 a.安装jdk(对应windows系统位数) http://www.oracle.com/technet ...
vue使用原生video标签播放视频
页面效果如下图如果想实现自动播放,需要加autoplay属性, 但是加了之后也可能出现无法自动播放的问题,还需要在加muted属性 muted 是静音属性添加了以后会自动播放但是没有声音怎么 ...
ios html5 自动全屏播放,禁止iPhone Safari video标签视频自动全屏的办法
最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签). 如: 在iPhone safari 点击视频会弹出播放器进行全屏播放. 在网上看 ...
原生video标签隐藏底部功能按钮
原生video标签隐藏底部功能按钮一.controlslist属性(只有3个配置项) 二.shadow DOM 1.查看shadow DOM(第一种) 2.查看shadow DOM(第二种) ①操作 ...
uniapp h5直播拉流的几种方法 flv.js， video.js，阿里播放器sdk，video标签
uniapp h5直播拉流的几种方法 flv.js, video.js, 阿里播放器sdk,video标签前言首先引入资源文件需要创建index.html 模板文件 flv.js video.j ...
视频网站中video标签中blob:http
视频网站中video标签中blob:http 一.问题场景想下载知乎视频资源,却发现视频链接是这个样子的 blob:https://v.vzuu.com/b6146956-6e52-406d-890 ...
Html5原生video标签禁止全屏播放的实现
制作移动端H5,需要添加视频,点击播放的时候会自动全屏播放,记录一下处理局部播放的问题. <video id="pageVideo"x5-playsinline=" ...
html自动播放avi视频,使用HTML5 video标签的一系列问题
H5标签的video,我想写过前端代码的人,都不会陌生吧.但video标签还是有一些问题. 一.PC端的兼容问题: H5的标签不兼容ie8包括ie8以下的浏览器:解决办法:使用js的库video.js ...
html播放mov格式视频,jQuery及video标签视频播放弹窗插件支持mp4,mov等格式详解(图文)...
在做html5做播放视频时,如果是mp4,ogg,webm等视频格式,用h5自带的video标签就可以实现,但苹果的mov格式视频video标签是不支持的. h5实现mp4视频播放:video标签仅支 ...

vue播放视频使用原生video标签基本功能（不含样式）

vue播放视频使用原生video标签基本功能（不含样式）相关推荐

最新文章

热门文章