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,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...
随机推荐
- 向大家介绍我的新书:《基于股票大数据分析的Python入门实战》
我在公司里做了一段时间Python数据分析和机器学习的工作后,就尝试着写一本Python数据分析方面的书.正好去年有段时间股票题材比较火,就在清华出版社夏老师指导下构思了这本书.在这段特殊时期内,夏老 ...
- httpd+tomcat 均衡负载
接前面的文章http://www.cnblogs.com/gqdw/p/3785812.html workers.properties worker.list=controller#worker1 w ...
- 关于RAID小结
独立硬盘冗余阵列(RAID, Redundant Array of Independent Disks),旧称廉价磁盘冗余阵列(Redundant Array of Inexpensive Disks ...
- .NetCore对接各大财务软件凭证API——用友系列(1)
一.前言 今天,我们转战用友系列的第一个产品---T+/Tplus.前两篇文章讲解分享的都是金蝶的产品,因为本身公司牵涉的业务有限,后续有金蝶其他产品的API对接业务时,会继续来分享经验. T+的AP ...
- 关于Android的真机测试
步骤: 1.开启手机USB调试 2.数据线连接手机和电脑 3.eclipse需要重启 4.在eclipse的run里面的runconfig...里面设置为启动时总是提醒开发者选择 具体事例: 我的手机 ...
- 王艳 201771010127《面向对象程序设计(java)》第十周学习总结
一:理论部分. 1.泛型程序设计意味着编写的代码可以被很多不同类型的对象所重用. 1)泛型(参数化类型):在定义类.接口和方法时,通过类型参数指示将要处理的对象类型.如ArrayList类是一个泛型程 ...
- windows 10 2016 企业版 长期服务 激活方式
试了很多,失败. 使用这个ok———————————————————————————————— 使用方式: 2.1.下载AAct.exe https://www.baidu.com/link?url ...
- docker安装和基本使用
1.安装环境 此处在Centos7进行安装,可以使用以下命令查看CentOS版本 lsb_release -a 在 CentOS 7安装docker要求系统为64位.系统内核版本为 3.10 以上,可 ...
- mantis2.22.1中添加管理员密码修改框
1.修改文件 mantis/manage_user_edit_page.php 找到<!-- Email -->位置,将以下代码粘贴到下面即可:<tr <?php echo h ...
- 剑指Offer之链表中倒数第k个结点
题目描述 输入一个链表,输出该链表中倒数第k个结点. 思路:首先计算出链表的长度,再计算出倒数第k个是正数第几个,找到该结点即可. public ListNode FindKthToTail(Li ...