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)