videojs双击全屏幕观看,videojs动态加载视频
前段时间闲来无事弄了弄video.js,感觉蛮好玩,能应用到各个应用端,自己在最后玩耍的时候,需要注意的只剩下两方面了,1,动态加载播放视频内容2,双击全屏观看,
var urlRoad = "";
var myPlayer = videojs('my-video');
videojs("my-video", {}, function() {
window.myPlayer = this;
$(" #my-video source").attr("src", "");
myPlayer.src(urlRoad);
myPlayer.load(urlRoad);
myPlayer.play(); });
只需要把路径动态放进去就好,但是点击全屏 就有点懵逼了,找了一下,最后发现了个插件,
https://github.com/ctd1500/videojs-hotkeys,按照方法就ok,瞬间精神爽 ,
var urlRoad = "";
var myPlayer = videojs('my-video');
videojs('my-video').ready(function() {
this.hotkeys({
volumeStep: 0.1,
seekStep: 5,
enableVolumeScroll: false,
enableModifiersForNumbers: false
});
});
videojs("my-video", {}, function() {
window.myPlayer = this;
$(" #my-video source").attr("src", urlRoad);
myPlayer.src(urlRoad);
myPlayer.load(urlRoad);
// myPlayer.enterFullScreen();
myPlayer.play();
myPlayer.on("ended", function(){
videoShowFun (num);
});
});
当然在视频结束后,还可以执行新的方法,言简意赅,贴代码去吧!!
videojs双击全屏幕观看,videojs动态加载视频的更多相关文章
- videojs 动态加载视频
VideoJS dynamic source change via RESTful API 'Undefined' issue with changing RTMP source on compres ...
- 动态加载EXE和DLL
程序中加载了一个DLL文件,但生成的EXE在脱离了DLL文件后仍然可以 单独使用,这是动态加载DLL技术.即:调用资源中的DLL. 此技术的好处:EXE可以使用DLL中的函数,但不会额外增加一 个DL ...
- Lodop 动态加载模板,动态加载数据
最近需要使用Lodop打印控件,所以就研究了一下,期间从网上找了诸多的东西,基本全是对HTML进行打印的,没有找到我想要的,就只好自己动手丰衣足食. 这篇文章主要讲述的是Lodop与数据的结合使用,官 ...
- OpenLayers学习笔记(十)— 动态加载JSON数据模拟航迹线
在openlayers 3 上,加载本地json数据,动态绘制航迹线,以飞机当前位置为地图中心,此例子是模拟DEMO 本文链接:动态加载JSON数据模拟航迹线 作者:狐狸家的鱼 GitHub:八至 前 ...
- C#自定义控件、用户控件、动态加载菜单按钮
一.效果图,动态加载5个菜单按钮: 二.实现方法 1.创建用户控件 2.在用户控件拖入toolStrip 3.进入用户控件的Lood事件,这里自动添加5个选 ToolStripMenuItem,后期 ...
- java中的动态加载和热替换
https://blog.csdn.net/u010833547/article/details/54312052 ****************************************** ...
- 二级ul li元素动态加载click事件
一.代码 html代码: <ul class="id1" id="id1" style="width:84%; height:75%;overf ...
- Xib设计UITableViewCell然后动态加载
转自: http://www.2cto.com/kf/201202/120764.html (注:环境Mac OS X Lion 10.7.3 + Xcode 4.2.1 + iOS SDK 5.0. ...
- js动态加载css和js
之前写了一个工具类点此链接里面含有这段代码,感觉用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjs ...
随机推荐
- Spring Data JPA 入门Demo
什么是JPA呢? 其实JPA可以说是一种规范,是java5.0之后提出来的用于持久化的一套规范:它不是任何一种ORM框架,在我看来,是现有ORM框架在这个规范下去实现持久层. 它的出现是为了简化现有的 ...
- [Code] 中缀式转后缀式
[Code] 中缀式转后缀式 概要 对于一个可带括号的中缀四则运算表达式, 例如30 + 4 / 2 或 30 / ( 4 + 2 ), 下面代码将分别转换为对应的后缀表达形式 30 4 2 / + ...
- linux分析apache日志获取最多访问的前10个IP
apache日志分析可以获得很多有用的信息,现在来试试最基本的,获取最多访问的前10个IP地址及访问次数. 既然是统计,那么awk是必不可少的,好用而高效. 命令如下: awk '{a[$1] += ...
- vscode格式化Vue出现的问题
一.VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 本来就是简写比较方便舒服,结果一个格式化回到解放前 最后找到问题原因: 首先,vetur默认设置是这个样的.也就是 ...
- 2.4 PCI总线的配置
PCI总线定义了两类配置请求,一个是Type 00h配置请求,另一个是Type 01h配置请求.PCI总线使用这些配置请求访问PCI总线树上的设备配置空间,包括PCI桥和PCI Agent设备的配置空 ...
- 导出CSV格式文件,用Excel打开乱码的解决办法
导出CSV格式文件,用Excel打开乱码的解决办法 1.治标不治本的办法 将导出CSV数据文件用记事本打开,然后另存为"ANSI"编码格式,再用Excel打开,乱码解决. 但是,这 ...
- const char *p;和char * const p的区别
const char *p; const修饰*p,所以*p是一个常量,不可修改. char* const p; const修饰p,所以指针p是一个常量,不可修改. #include< ...
- Tomcat中的Context.xml的<Loader delegate="true"/>
Tomcat中的Context.xml的<Loader delegate="true"/> 1.<Loader delegate="true" ...
- Error #2044: 未处理的 ioError:。 text=Error #2032
1.错误描述 Error #2044: 未处理的 ioError:. text=Error #2032: 流错误. URL: http://127.0.0.1:8080/HBMB/analysis/a ...
- Vue指令总结---小白同学必看
今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...