打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Miniblink 调用 Video.js 播放视频

上次的我们演示了 Miniblink 调用 HTML5Media 播放视频。HTML5Media 会显示一个 Logo ,而且在高分屏上控制条没有自适应缩放 —— 显示得特别小,Video.js 就没有这些问题,显示效果更好接口也更强大。Miniblink 其实也能用上 Video.js ,但要踩一些坑 —— 今天我就为大家提供一个超级懒人包,简洁快速地解决这些问题。

首先我改动了一下 web.blink 扩展库的源码,所以请先升级这个扩展库。然后我修改了一个 Miniblink 专用的 Video.js 上传到了 https://github.com/aardio/video-js-blink 。这里要注意在 Miniblink 里只能使用 Video.js 7.7.4 这一个版本,更高版本不行,更低版本 —— 抱歉也不行。

我们已经知道,Miniblink 检测 video 节点会返回错误信息 —— 会导致这类试图通过 Flash 兼容播放 HTML5 视频的播放器无法使用,在 Video.js 里我们同样要想办法跳过这个检测。我们粗暴地修改 Video.js 源码让 defaultTechOrder_  的默认值设为 Flash 播放器( 当然也可以多写一个参数,但没什么必要 )。

另外 Miniblink 无法正常触发全屏事件,document.onfullscreenchange 无效,webkitfullscreenchange 也是没用的。要解决这个问题只能改 Video.js 的源码直接调用 aardio 的全屏函数,这些目前我都已经改好了。

调用范例:

import web.blink.form;import web.npPlugin.flash;import wsock.tcp.asynHttpServer;import win.ui;/*DSG{{*/var winform = win.form(text='web.blink 支持 HTML5 视频(基于 Flash)';right=1008;bottom=616)winform.add()/*}}*/
var httpServer = wsock.tcp.asynHttpServer(); httpServer.run( { ['/index.html'] = /**<html><head> <style type='text/css'> html,body { height:100%;width:100%;margin:0;overflow:hidden; }</style> <!--第一步:引入下面3个文件加载播放器 --> <link href='https://cdn.jsdelivr.net/gh/aardio/video-js-blink/video-js.min.css' rel='stylesheet'> <script src='https://cdn.jsdelivr.net/gh/aardio/video-js-blink/video.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/videojs-flash@2.2.1/dist/videojs-flash.min.js'></script> </head><body>
<!-- 第二步:插入视频文件 --> <video id='my-player' class='video-js' controls preload='auto' style='width:100%;height:100%' > <source src='http://download.aardio.com/demo/video.aardio' type='video/mp4'></source> </video>
<script> //第三步:初始化播放器,这一步不能省略 var obj = videojs('my-player', { controlBar: { fullscreenToggle: true } }); </script></body></html>**/;});
var wb = web.blink.form( winform );wb.go( httpServer.getUrl('index.html') );
winform.show(); win.loopMessage(); 
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
教程:使用web.blink (miniblink) 嵌入瀏覽器控件
网页视频播放器video.js
优酷视频html5嵌入代码
视频播放插件Video.js
HTML5播放器 MediaElement.js 使用方法
html5播放器完整代码
更多类似文章 >>
生活服务
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服