Videojs 项目开发使用解析
来源:互联网 发布:java项目开发全过程 编辑:程序博客网 时间:2024/05/20 06:08
最近项目开发中包含了视频业务,之前架构设计用的是ckplayer插件,但是无法正常播放切片后的m3u8格式的文件,因为有app端视频播放,ios必须h5,后来我们采取了videojs.虽然videojs很强大,但是他的官方文档暂时没有中文版本,一些问题百度也无法找到解决方案.我们就简单的把开发中遇到的问题整体一下.方便大家后期解决问题.
1.首先是文件的引用
<script src="<%=requestContext %>/video-js-6.2.6/video.min.js"></script><script src="<%=requestContext %>/video-js-6.2.6/videojs-flash/videojs-flash.min.js"></script><script src="<%=requestContext %>/video-js-6.2.6/plugins/hls/videojs-contrib-hls.min.js"></script><script src="<%=requestContext %>/video-js-6.2.6/lang/zh-CN.js"></script><!-- Set the location of the flash SWF --><script> videojs.options.flash.swf = '<%=requestContext %>/video-js-6.2.6/videojs-flash/video-js.swf';</script>
2.video标签
<video id="video1" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%;height: 100%;" poster="<%=requestContext %>/images/player.jpg"></video>
1) poster属性:展示视频的封面,如果需要展示视频第一帧,这个属性不定义就可以,但是app不兼容这个属性,找了好久,暂无解决办法,但是pc可以.
2)vjs-big-play-centered:videojs:一个class,因为videojs播放按钮默认在左上角,加上这个class就居中了.
3)video初始化:
<script>videojs('video1',{ "autoplay" : false, "controls" : true, "techOrder" : [ "html5", "flash" ], //"width":"100%", //"height":"100%", "sources" : [ { src : "${video1.videofile.videopath}", type : "${video1.videofile.mimetype}" } ]}); </script>
这段初始化代码是videojs用来初始化video的,建议放在页面底端.因为放在上面获取video的id时,video还没加载.
"sources" : [ { src : "${video1.videofile.videopath}", type : "${video1.videofile.mimetype}" } ]
sources定义的视频的路径和解析方式:
a. src :你的视频文件地址
b. type :视频类型 eg:video/mp4(如果视频是转码格式,一定要换成转码的类型eg:application/x-mpegURL)
3.不刷新页面更换视频播放源
项目中可能会有不能刷新页面 但是视频需要改变
var videojsplay=videojs('video1');videojsplay.src({src: path, type: mimetype});videojsplay.play();
可以通过ajax获取,play()是视频播放方法,如果切换了视频源可以直接播放.
4.尽量不要改videojs样式或者js源码,会导致一些奇葩bug.
暂时先写这么多吧,有问题可以留言问我.上一张app播放图,哈哈哈
阅读全文
0 0
- Videojs 项目开发使用解析
- videojs使用入门
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs的使用
- videojs的使用以及如何把播放按钮居中
- videojs入门
- ios 项目开发目录解析
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs初始化的一些样式处理
- EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放
- Gson项目使用全解析
- 【Android开发经验】超好用的json解析工具——Gson项目使用详解
- 【Android开发经验】超好用的json解析工具——Gson项目使用详解
- 使用库项目开发
- 项目开发->cocoapods使用
- 使用ionic2开发项目
- HTML5视频播放器VideoJS使用附【源码及示例】- 兼容IE
- 一款开源免费跨浏览器的视频播放器--videojs使用介绍
- EasyNVR H5无插件直播方案前端架构之:videojs的使用
- VideoJS - HTML5 Video
- spring batch DataAccessResourceFailureException
- 遇到蛋疼的查看方法Apple Mach-O Linker (ld) Error Group
- 在CodeWarrior for S12(X)的调试器中使用控制点(断点、观测点、标记点)
- eas bos 开发 修改 行政组织弹出框样式
- Spring MVC笔记 使用JdbcTemplate
- Videojs 项目开发使用解析
- 测试接口google浏览中测试
- Educational Codeforces Round 30 总结
- 几种maven仓库的优先级
- javax.servlet.ServletException: Servlet.init() for servlet springMVC threw exception
- 加快gradle构建,提升开发效率,4分钟变20s,亲身体验
- C++ STL set和multiset
- 《Spring5官方文档》新功能
- 两个有序链表的合并