|
上次的我们演示了 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./gh/aardio/video-js-blink/video-js.min.css' rel='stylesheet'> <script src='https://cdn./gh/aardio/video-js-blink/video.min.js'></script> <script src='https://cdn./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./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();
|
