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,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...
随机推荐
- Elasticsearch系列---几个高级功能
概要 本篇主要介绍一下搜索模板.映射模板.高亮搜索和地理位置的简单玩法. 标准搜索模板 搜索模板search tempalte高级功能之一,可以将我们的一些搜索进行模板化,使用现有模板时传入指定的参数 ...
- mysql-kettle-superset电商可视化数据分析
1.项目概述 需求 对电商业务中的用户.商品.订单的数据进行分析,观察运营的情况 架构 业务数据库:Mysql:存储最原始的数据 ETL:Kettle 数据仓库:Mysql:存储需要进行分析处理的数据 ...
- SpringBoot2.0 @Cacheable 添加超时策略
SpringBoot2.0 @Cacheable 添加超时策略 逻辑比较简单,废话不多说,直接进入正题: 需求:SpringBoot 利用注解使缓存支持过期时间 (同@Cacheable @Cache ...
- Win32 Sdk 连接Access数据库
/************************************************************* *** MyWinClass.cpp 创建窗口模板 *** vs2017+ ...
- python装饰器在接口自动化测试中的应用
在讲解装饰器在接口自动化测试项目的应用之前,我们先来介绍一下python装饰器到底是个什么 装饰器 说装饰器就不得不提一下函数这个一等公民了,在python中函数有几个特性先来了解一下 函数的一些特性 ...
- Oracle细粒度审计
场景 管理信息化应用,想审计某张表的数据是否做了删除.Oracle中专门有自带的函数.可以满足这个需求 1.查询审计日志的语句 select timestamp, db_user, os_user, ...
- Scrapy 框架 入门教程
Scrapy入门教程 在本篇教程中,我已经安装好Scrapy 本篇教程中将带您完成下列任务: 创建一个Scrapy项目 定义提取的Item 编写爬取网站的 spider 并提取 Item 编写 Ite ...
- uwsgi模块以参数形式运行项目
1.虚拟环境中下载uwsgi模块-------pip install uwsgi 2.脚本运行案例 新建一个test.py脚本文件,写入如下内容: def application(env, start ...
- 关于hadoop3.x MR报错:找不到或无法加载主类 org.apache.hadoop.mapreduce.v2.app.MRAppMaster
用的apache Hadoop3.X,今天运行MR报错: 找不到或无法加载主类 org.apache.hadoop.mapreduce.v2.app.MRAppMaster 关键需要配置两个配置:ma ...
- tomcat——启动项目报错:java.lang.IllegalStateException
java.lang.IllegalStateException: BeanFactory not initialized or already closed - call 'refresh' befo ...