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(); 
(0)

相关推荐