本文说明了阿里云Web端播放器SDK,Flash和H5两种播放模式的支持格式、适配情况、适配问题并提供了对应的示例代码。

支持格式

阿里云Web端播放器SDK,同时支持Flash和H5两种播放技术。
  • Flash 模式(已停止更新):
    • 视频格式:MP4、FLV、M3M8、RTMP
    • 视频编码:H.264
    • 音频编码:AAC、MP3
    • 音频格式:MP3
  • H5 模式:
    • 视频格式:MP4、FLV、M3M8
    • 视频编码:H.264
    • 音频编码:AAC
    • 音频格式:mp3

适配情况

  • Flash模式,适配情况如下:
    浏览器 MP4 FLV M3U8 RTMP MP3
    Chrome
    Firefox
    IE IE 8及以上版本 IE 8及以上版本 IE 8及以上版本 IE 8及以上版本 IE 8及以上版本
    Edge
    Opera
    Safari
    说明 移动端(iOS、Android)不支持Flash播放器。
    当使用flash播放器要支持IE8浏览器时,需要在页面添加json.min.js的引用。示例如下:
    https://g.alicdn.com/de/prismplayer/2.9.3/json/json.min.js
  • H5模式,适配情况如下:
    播放器 MP4 FLV M3U8 RTMP MP3
    Chrome 34及以上版本 34及以上版本 ×
    Firefox 49及以上版本 49及以上版本 ×
    IE IE 9及以上版本
    • IE 11及以上版本
    • Windows 8.1及以上版本
    • IE 11及以上版本
    • Windows 8.1及以上版本
    × IE9及以上版本
    Edge ×
    Opera ×
    Safari 8及以上版本 8及以上版本 ×
    说明
    移动端 MP4 FLV M3U8 RTMP MP3
    iOS × ×
    Android × 4.0及以上版本 ×
    说明 h5播放器在移动端不支持flv和rtmp的播放。
  • H5阿里云HLS加密播放,适配情况如下:
    加密 iOS Android PC
    标准加密
    • Chrome
    • FireFox
    • Safar
    • iEdge
    • IE 11及以上版本
    • Windows 8.1及以上版本
    私有加密 × Chrome for Android
    • Chrome
    • FireFox
    • Safar
    • iEdge
    • IE 11及以上版本
    • Windows 8.1及以上版本
    加密播放:
    说明 阿里云私有加密推荐使用Chrome浏览器播放。
  • 启用私有加密的防调式
    通过引入aliiplayer-vod-anti-min.js文件开启防调试模式,考虑到在开发过程中的调式, 您可以在发布的产品中引入,Javascript文件的地址示例如下:
      <script src="https://g.alicdn.com/de/prismplayer/2.9.3/hls/aliplayer-vod-anti-min.js"></script>
    注意 如果关闭开发者工具页面还是无法刷新出来,需要在新的tab里重新打开页面。

H5适配问题

  • 移动端浏览器视频会默认全屏播放,针对不同的情况需要不同的设置:
    • iOS App:App实现内联播放需要设置Aliplayer提供的playsinline属性为true,同时WebView需要设置allowsInlineMediaPlayback,设置后页面在App里打开时视频就能以非全屏模式(即内联的方式)播放。
    • Android:Android系统会有不同的定制版本,每个版本对H5 video标签的实现都有差别,所以在Android系统上播放视频所展现的一致性,相比iOS系统要差很多,也可以设置playsinline属性为true,只需要终端浏览器支持内联播放,对于X5内核浏览器(微信,QQ浏览器)可以启用同层播放,达到类内联播放的目的。
    • Safari浏览器:iOS10以下版本的Safari浏览器是无法禁止视频自动全屏播放的。
  • 设置autolay属性为true是无效的,不会触发自动播放:
    • 移动端浏览器:H5Video自动播放视频只有两个办法,通过设置autoplay属性或者调用play()方法,但是现实是在移动端中视频自动播放一直是被禁止的,目前通用的办法是通过用户手动触发播放(例如:监听用户的点击事件并调用play()方法。
      说明 不排出一些特性的浏览器和webview允许自动播放器,特别是在Android系统上。
    • Safari浏览器:MacOS High Sierra Safari 11以上的浏览器限制自动播放。
    • Chrome浏览器:Chrome 55浏览器以上版本也限制自动播放。
  • 音量调节功能(getVolumnsetVolumn)在iOS系统和部分Android系统会失效。
  • 倍速播放功能,部分移动端浏览器不支持设置倍速,功能会失效,比如Android系统的微信。
  • 截图功能在移动端部分机型由于安全问题,会截图失败。比如Android4.4.1系统或者浏览器本身问题,截的图片是全黑的,可以通过截图检测工具验证浏览器的支持情况。

导入引用文件

不依赖于任何的前端js库,只需要在页面中引用如下js文件,就可以进行播放器的初始化。示例如下:
https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js
说明 如果出现文本乱码,可以在<script></script>标签中添加charset="utf-8"属性。
引用的js文件同时包含了Flash和H5跨终端自适应的逻辑。如果您只是想使用其中一种播放技术,也可以只引用对应技术的js文件,从而获得更小的文件体积:
  • Flash版本,示例如下:
    https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-flash-min.js
  • H5版本,示例如下:
    https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-h5-min.js
如果您的使用场景需要用到H5播放器,请额外引用css文件。示例如下:
<!DOCTYPE html>
<html>
    <head>
     <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
    </head>
</html>

SDK使用

Aliplayer SDK除了直接支持Source播放方式外,还支持通过阿里云视频云服务的video方式播放: 示例如下:
<!DOCTYPE html>
<html>
    <head>
     <meta charset="UTF-8">
     <meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
     <title>用户测试用例</title>
     <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
    </head>
    <body>
        <div  class="prism-player" id="J_prismPlayer"></div>
        <script>
            var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            autoplay: true,
            //支持播放地址播放,此播放优先级最高
            source : '播放url',
            //播放方式二:点播用户推荐
            vid : '1e067a2831b641db90d570b6480fbc40',
            playauth : 'ddd',
            cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
            encryptType:1, //当播放私有加密流时需要设置。
            //播放方式三:仅MPS用户使用
            vid : '1e067a2831b641db90d570b6480fbc40',
            accId: 'dd',
            accSecret: 'dd',
            stsToken: 'dd',
            domainRegion: 'dd',
            authInfo: 'dd',
            //播放方式四:使用STS方式播放
            vid : '1e067a2831b641db90d570b6480fbc40',
            accessKeyId: 'dd',
            securityToken: 'dd',
            accessKeySecret: 'dd',
             region:'cn-shanghai',//eu-central-1,ap-southeast-1
            },function(player){
                console.log('播放器创建好了。')
           });
        </script>
    </body>
</html>
您可以对播放器进行可视化的在线配置,请参见在线配置
说明
  • 播放直播流时需要将isLive设置为true。
  • 媒体处理播放的参数说明请参见视频播放
  • 视频点播更多接口请参见属性和接口说明

扫描体验

使用钉钉扫描以下二维码体验阿里云播放器Demo。二维码