vue使用 video.js动态切换视频源视频源不刷新问题
网上的垃圾代码太多,最后翻了video.js的官方文档,就这么简单,浪费了我这么久,注:我这里使用的vue
//html
<video id="my-player" controls autoplay preload="auto" class="video-js vjs-big-play-centered vjs-fluid vjs-16-9 vjs-big-play-centered"
controls preload="auto" data-setup='{}'>
<source id='videoid' :src="videosrc" type="application/x-mpegURL">
</video>
//随便定义一个方法
<p @click="selectomit >点击我</p>
//vue methods里面
selectomit (){
var that = this;
that.videosrc = '你的路径';
console.log(that.videosrc);
var player=videojs('my-player');
console.log(player);
player.src({
src:that.videosrc
})
}
vue使用 video.js动态切换视频源视频源不刷新问题的更多相关文章
- vue使用video.js解决m3u8视频播放格式
今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请 ...
- vue基于video.js实现视频播放暂停---切图网
切图网是最早致力于PSD2HTML切图等web前端外包服务的,随着前端技术的更新迭代,现在也已经全面投入了vue的浪潮了,下面是vue中实现视频播放的方法. vue.js中引入video视频播放器 m ...
- video.js分段自动加载视频【html5视频播放器】
突发奇想的需求,要在官网上放一个一个半小时的视频教程…… 然而,加载成了问题,页面是cshtml的.net混合网站,不知道哪儿的限制,导致视频加不出来. 没有办法,只能前端想办法了. 于是将视频切割成 ...
- js 动态切换视频
如图所示,想要一个这样的效果,就是点击下面视频标题时,上面的视频跟着切换,但是要求页面不重新加载. 参考文章在这里 这里贴上部分代码供大家参考. <li id="about_li6&q ...
- js动态切换图片
<script language =javascript > $(function () { initAds(); }); function initAds() { var curInde ...
- video.js 应用于网站需要视频的
http://www.cnblogs.com/lechenging/p/3858181.html
- 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。
最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...
- 【vue】使用 Video.js 播放视频
目录 安装 引入 使用 参考文档 环境: vue 2.0+ element ui (这里的代码用了elmentui的按钮样式,可以不用elment ui的样式) 安装 在项目中安装 video.js. ...
- 前端视频直播技术总结及video.js在h5页面中的应用
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...
随机推荐
- CSS理论:margin-left在float中的运用
源码如下: margin-left 指的是左边的外边距,为正数时,左边间距增大,div向右偏移,为负数时,左边间距减少,相反往左偏移 双飞翼 .wrap { width: 100%; margin: ...
- 使用jquery实现的自适应导航
话不多说,直接晒代码 <div class="headering"> <div class="header-top"> <div ...
- libevent到底是同步还是异步,是阻塞还是非阻塞
应该从不同角度看libevent的同步/异步.阻塞/非阻塞: IO数量的角度:select出来之前,会阻塞在一个io上,处理完成后再阻塞在下一个io上:之后就是把所有的io fd拿过来,都不阻塞,一个 ...
- java -类加载器与反射
类加载器 类的加载 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. l 加载 就是指将class文件读入内存,并为之创建一个Class ...
- C#如何给WinForm的button等控件添加快捷键
网上有三种方法来设置快捷键,经本人验证后得出最优方法 Alt+*(按钮快捷键) 在大家给button.label.menuStrip等控件设置Text属性时在后边加&键 名就可以了,比如b ...
- ql的python学习之路-day4
集合(set) 集合主要有两种用处: 1.去除相同的元素 2.关系测试,两个列表中的元素的关系 按照‘alex’讲的自己写了源码笔记,下面就直接贴出来: #!/usr/bin/env python # ...
- 【MySQL】MyISAM和InnoDB存储引擎区别详解
MyISAM 主键索引(引擎的索引文件和数据文件是分离的) (图片来自:https://blog.csdn.net/u010922732/article/details/82994253) 非主键索引 ...
- 服务治理:Spring Cloud Eureka
Spring Cloud Eureka主要负责完成微服务架构中服务治理功能. 服务治理是微服务架构中最为核心和基础模块,主要用来实现各个微服务实例的自动注册和发现. 服务注册 微服务实例启动后向注册中 ...
- javascript图片加载完成前显示loading图片
<html> <title>图片预加载</title> <body> <script> //判断浏览器 var Browser=new Ob ...
- JavaScript中foreach、map、filter、find、every、some的用法
foreach:只是循环数组中的每一项,没有返回值 如: var arr = [2,3,3,4,5,6]; arr.foreach(function(item,index,array){ dosom ...