残酷的移动互联网竞争环境下，HTML5技术一直受到各方关注，“HTML5颠覆原生App”的争论也从未停止过，不管怎样HTML5生态的构建方兴未艾。不过对于移动开发者来说更关心的问题是如何低成本、周期短开发出体验效果好的App，所以当下用HTML5远比赌HTML5更现实。于是，一个一直被提及但是从没有占据过统治地位的概念又一次走进了移动开发者们的视野，那就是跨平台开发。

AD：WOT2015互联网运维与开发者大会热销抢票

目前国内外已经有很多基于HTML5的跨平台开发工具，你并不需要任何的原生应用编程经验，你只需要一些HTML的相关知识，懂一些CSS和JavaScript，运用工具中所提供的各种丰富的功能模块，便可在很短时间内完成App的开发而且让你的App具备完美的原生体验。

推荐几款跨平台工具

1、Appcelerator

Appcelerator的Titanium开发平台使开发者可以通过HTML、PHP、JavaScript、Ruby、Python等Web编程语言开发手机、平板和桌面的原生App。其优势在于它可以让用户轻松地访问超过300个API以及定位信息。

此外，Appcelerator提供针对特定行为或事件定制的统计。App的数据既可储存在云端，也可储存在设备上。

2、APICloud

APICloud是一款“云端一体”的移动开发平台，信仰“云端一体”的理念，重新定义了移动应用开发。APICloud为开发者从“云”和“端”两个方向提供API，简化移动应用开发技术，让移动应用的开发周期从一个月缩短到7天。APICloud由“云API”和“端API”两部分组成，可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。

2、PhoneGap

PhoneGap是一个免费且开源的开发环境，使开发者可以开发出在Android、Palm、黑莓、iPhone、iTouch及iPad等设备上运行的App。其使用的是HTML和JavaScript等标准的Web开发语言。开发者使用PhoneGap进行开发，可调用加速计、GPS/定位、照相机、声音等功能。

PhoneGap还提供Adobe AIR App以及在线的培训课程，帮助开发者了解原生API并在他们自己的平台上开发移动App。

4、NativeScript

NativeScript是使用移动平台的JavaScript引擎来进行跨平台开发。逻辑部分自然无需多说，关键在于如何使用平台特性。NativeScript是通过反射得到所有平台API，预编译它们，然后将这些API注入到JavaScript运行环境，接下来在Javascript调用后拦截这个调用，并运行native代码。NativeScript是使用大量web开发的技巧来进行app开发，因为工具链和语言都非常熟悉受到了很多前端开发者的欢迎。

5、Kinvey

Kinvey同样是一个为移动应用开发者提供后台创建服务的平台。Kinvey强调加速移动应用开发与销售的“即取即用”理念。Kinvey的中间层与数据层均托管在多个云服务提供商处，包括Rackspace、Amazon与Microsoft。所有通过Kinvey存储的数据都会有四种方式备份：Amazon EC2、Windows Azure、Rackspace以及Kinvey自己的服务器，假如其中一两个出现了故障，用户的数据依然安然无恙。

总结：

关于HTML5和原生App的争论一直在继续，不论最后谁能取胜，开发者更关心App的开发速度和最终体验。合理的使用工具会让开发效率大大提升，甚至达到事半功倍的效果，希望能有一款适合您。

期待未来有一天，App开发可以像在纸上画画一样简单。

声明：IT之家网站刊登/转载此文出于传递更多信息之目的，并不意味着赞同其观点或论证其描述。

开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件——MuiPlayer。

MuiPlayer 是一个开源的HTML5视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节等功能。支持 mp4、m3u8、flv 等多种媒体格式播放，解决大部分兼容问题，同时适应在PC、手机端播放。

特点

• 各浏览器平台播放 ui 不能统一
• ui 扩展之间以及状态处理容易产生冲突
• 在不同环境下（android、ios、pc）针对 h5 video api 可能触发事件的时机尽不相同
• 媒体格式存在各种兼容问题，muiplayer 处理了大多数在不同环境下播放的兼容问题
• 具有丰富的参数可以自定义播放器实例，通过轻松的配置即可完成自定义场景的视频播放

快速开始

• 安装

使用 npm 安装：

npm i mui-player --save

使用 yarn 安装：

yarn add mui-player

• 使用

1 使用 script 标签引入：

<!-- 引入基础样式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<!-- 引入基础脚本 mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>

<!-- 指定播放器容器 -->
<div id="mui-player"></div>

或者使用模块管理器引入：

import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'

2 定义播放器容器

<div id="mui-player"></div>

3 初始化构建播放器

// 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
var mp = new MuiPlayer({
    container:'#mui-player',
    title:'标题',
    src:'./static/media/media.mp4',
})

以上就能为初始化构建一个具有默认配置控件的视频播放器。

更多API基础配置： https://muiplayer.js.org/zh/guide/api.html#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE

效果演示

• 基础效果

• 直播模式

• 播放字幕

• 播放弹幕

• 多窗口播放

更多内容大家可自行前往阅读。

开源地址：https://gitee.com/muiplayer/hello-muiplayer

<link href="./video-js.min.css" rel="stylesheet">
<script src="./video.min.js"></script>

npm install video.js

 <video id="my-player" class="video-js" controls preload="auto" poster="封面url，设置就可以显示封面" data-setup='{}'>
 <source src="视频URL" type="video/mp4">
 </source>
 </video>

var player = videojs('my-player');

var options = {};
var player = videojs('my-player', options, function onPlayerReady() {
 videojs.log('Your player is ready!');
 this.play();
 this.on('ended', function() {
 videojs.log('Awww...over so soon?!');
 });
});