阿里云视频直播 web前端[移动端] Aliplayer的简单案例

阿里云视频直播 web前端[移动端] Aliplayer的简单案例

最近做了一个功能就是播放后台提供的各种直播视频，格式在未确定的情况下，刚开始以为简单的一个video标签就能播放视频，后面才发现各种问题，video只是能播放一些常见的音视频格式，video是HTML5的新标，兼容这块就有很多浏览器不支持，主要兼容不是浏览器不支持，更多的是video不支持音视频格式。

video兼容 一共支持三种格式：Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。

格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No

NO：代表不支持这款浏览器。 X.0+：表示支持这款及版本更高的浏览器。

MP4 = MPEG4 文件使用 H264 视频编解码器和AAC音频编解码器 WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器 Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

Aliplayer支持的格式 在移动端无法播放flv格式端直播流，甚至是bilibili的Flv.js也无法支持移动端进行直播。 Flv.js在移动端导致flvjs.isSupported()方法无法获取到，直接报undefined，经过测试，发现bilibili在手机浏览器可以进行播放，很奇怪，发现别人能做到，相信自己也能做到，直到后面怎么也实现不了，后面看了bilibili的移动端浏览器页面的直播居然是m3u8格式的直播源，尴了个尬。 最后实在没办法，只能交给后台进行格式转换才实现直播源播放。

下面是我的源码： 1、引入

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"> <script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js" charset="utf-8"></script>

2、html

<div class="prism-player" id="player-con"></div>

3、js

var player = new Aliplayer({ "id": "player-con", "source": "//player.alicdn.com/video/aliyunmedia.mp4",//视频地址，支持mp4、m3u8 "width": "100%", "height": "500px", "autoplay": true, "isLive": false, "rePlay": false, "playsinline": true, "preload": true, "controlBarVisibility": "hover", "useH5Prism": true }, function (player) { console.log("The player is created"); } );

aliyunmedia在移动端测试，只测试到了mp4、m3u8、flv，flv格式无法播放，需要flash播放器。