直播视频插件--sewise player

直播视频插件 -- sewise player

2017-1-9

　　因为公司要开发一个关于购车直播的新项目，需要在页面引入直播视频，项目组之前都没有做过关于直播类型的项目，所以可以说是真的从各种资源中筛选合适我们的视频插件，最后选择了一个比较好上手的一个视频插件 sewise player ，这个视频插件可以用来点播，也可以用来直播，当然想做到短延迟和直播视频的传输稳定还是需要更多功能添加的。

　　我们在做的时候借助腾讯云的rtmp推流直播软件进行的测试直播，一方推流直播这边收看直播，页面的加载时间延迟取决于网络的好坏，公司的网还可以，所以简单的测试的时候加载缓冲时间还可以，不过直播时的延迟问题还是一个亟待解决的问题；

　　项目中使用的是跨平台直播视频的案例，参考官方API demos中的m3u8_cross_platform.html文件；

　　下面就简单的说一下这个视频插件的介绍、功能及使用

　　插件的官方文档地址为：https://github.com/jackzhang1204/sewise-player

Sewise Player是一款专业的免费网页HTML5视频、流播放器，它功能强大，体积小，跨平台，兼容性好，使用方便简洁。

• 播放器是主要以HTML5技术为平台开发，同时兼容Flash技术，实现了跨平台各浏览器兼容的视频播放。使用Sewise Player您可以在Windows, MacOS, Linux，Windows Phone, Android, IOS等任意平台上，通过对应的浏览器或者APP中基于WebView播放视频。
• Sewise Player使用非常简单，只要在页面对应的DIV内嵌入一个JS文件即可，播放器将通过自动识别浏览器的功能来启用HTML5或Flash模式播放视频。您不需要掌握任何JavaScript或ActionScript编码技术就可以制作出专业的网页视频播放器。
• Sewise Player即可以做为单一的前台播放器来在页面上播放视频和流，也可以结合Sewise Server后台技术实现专业的可交互的点播、直播视频播放。

播放器运行原理:

• 第一步：页面加载sewise.player.min.js文件后，该脚本会将相应的参数解析出来，并检查出当前的设备平台、浏览器特性，同时还会根据JS文件的路径取出host地址，用于播放地址请求。
• 第二步：通过分析出来的vod与type参数与及浏览器特性，来确定播放器是启用HTML5还是Flash模块。对于不同平台和浏览器同时支持的视频格式或流协议，将优先启用HTML5播放模块。
• 第三步：加载对应的皮肤文件与库文件。
• 第四步：在皮肤加载完成后将根据给定的参数来初始化播放器。播放器初始化完成后，开始播放视频、流同时会在当前页面中回调playerReady()（HTML5或Flash播放器都会回调playerReady方法，表示播放器API接口已可用）等相应的播放器回调方法。

特点：

• 播放器是主要以HTML5技术为平台开发，同时兼容Flash技术，实现了跨平台各浏览器兼容的视频播放。使用Sewise Player您可以在Windows, MacOS, Linux，Windows Phone, Android, IOS等任意平台上，通过对应的浏览器播放视频。

• Sewise Player使用非常简单，只要在页面对应的DIV内嵌入一个JS文件即可，播放器将通过自动识别浏览器的功能来启用HTML5或Flash模式播放视 频。您不需要掌握任何JavaScript或ActionScript编码技术就可以制作出专业的网页视频播放器。

• Sewise Player即可以做为单一的前台播放器来在页面上播放视频和流，也可以结合Sewise Server后台技术实现专业的可交互的点播、直播视频播放。

功能列表：

• 支持HTML5，Flash视频播放技术。
• 支持多平台，PC包括Windows, MacOS, Linux等。Mobile包括Android, IOS, Windows Phone等。
• 支持多浏览器兼容，如IE6/7/8/9/10、Google Chrome、Firefox、safari、Opera等。
• 支持多种视频格式，如mp4、m3u8、oga、webm、theora、flv、f4v等。
• 支持多种协议直播流，如rtmp、hls、http等。
• 支持Flash播放m3u8文件，以及AES-128解码播放。
• 支持PC与Mobile平台播放器自动识别功能。
• 支持浏览器HTML5与Flash特性检测。
• 支持HTML5不同视频格式地址Fallback兼容播放功能。
• 支持Flash Fallback到HTML5视频播放功能。
• 支持播放地址AMF, AJAX, JOSNP类型请求。
• 支持自定义HTML5与Flash皮肤，让您无需了解专业的编码技术也可以制作出超烗风格的皮肤。
• 支持前置广告（swf, 图片, 视频）。
• 支持字幕。
• 支持多种播放参数设定，并支持启动参数设置。
• 支持丰富的api接口，以此可以快速打造功能强大的插件。

页面播放器嵌入方式：　

• setup方式嵌入播放器。

<div style="width: 640px; height: 360px; ">
    <script type="text/javascript" src="../player/sewise.player.min.js"></script>
        <script type="text/javascript">
            SewisePlayer.setup({
                server: "vod",
                type: "mp4",
                videourl: "http://jackzhang1204.github.io/materials/mov_bbb.mp4",
                skin: "vodWhite",
                title: "Tile 标题",
                lang: 'zh_CN',
                fallbackurls:{
                    ogg: "http://jackzhang1204.github.io/materials/mov_bbb.ogg",
                    webm: "http://jackzhang1204.github.io/materials/mov_bbb.webm"
                }
            });
        </script>
</div>

• 点播，实际地址播放。

<div style="width: 640px; height: 360px; ">
    <script type="text/javascript" src="../player/sewise.player.min.js?server=vod&type=mp4&videourl=http://www.w3schools.com/html/mov_bbb.mp4&sourceid=&autostart=true&starttime=0&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&title=VodVideo&buffer=5&skin=vodWhite"></script>
</div>

• 点播，节目ID播放。

<div style="width: 640px; height: 360px; ">
    <script type="text/javascript" src="http://219.232.161.202/libs/swfplayer/player/sewise.player.min.js?server=vod&sourceid=eQgPHj4N&autostart=true&starttime=0&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&buffer=5&skin=vodWhite"></script>
</div>

• 直播，实际地址播放。

<div style="width: 640px; height: 360px; ">
    <script type="text/javascript" src="../player/sewise.player.min.js?server=live&type=rtmp&streamurl=rtmp://219.232.161.204/livestream/mtzysunq&autostart=true&pid=&shifttime=&buffer=5&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&title=LiveVideo&skin=liveWhite"></script>
</div>

• 直播，节目ID播放。

<div style="width: 640px; height: 360px; ">
    <script type="text/javascript" src="http://219.232.161.204/libs/swfplayer/player/sewise.player.min.js?server=live&autostart=true&pid=vk5nx2cj&shifttime=&buffer=5&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&skin=liveWhite"></script>
</div>

播放器参数：

• Sewise Player播放器提供了灵活的参数设置功能，通过设置不同的参数值可以让播放器具有不同的播放特性。
• 详细参数说明，见：github官网API中 参数说明.md文件。

API接口调用：

• Sewise Player播放器对外提供了丰富的API接口，通过API接口调用可以轻松控制播放器播放。
• 详细接口说明，见：github官网API中 接口说明.md文件。

特别注意:导入sewise player项目后，需要在tomcat部署的环境下,比如localhost:8080/project_name,不能直接右击打开文件，以file/开头展示页面。