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

支持格式

阿里云Web端播放器SDK,同时支持Flash和H5两种播放技术。
  • Flash模式(已停止更新):
    • 视频格式:MP4、FLV、M3U8、RTMP
    • 视频编码:H.264
    • 音频编码:AAC、MP3
    • 音频格式:MP3
  • H5模式:
    • 视频格式:MP4、FLV、M3U8
    • 视频编码: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播放器。
    在IE 8浏览器使用Flash播放器时,需要在页面添加json.min.js的引用。示例如下:
    https://g.alicdn.com/de/prismplayer/2.9.7/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及以上版本
    × IE 9及以上版本
    Edge ×
    Opera ×
    Safari 8及以上版本 8及以上版本 ×
    说明
    • 播放FLV、M3U8视频,需要使用PC端支持的浏览器,并且启用跨域访问
    • PC端Chrome浏览器在移动模拟器下,播放M3U8需要安装Native HLS Playback Chrome插件。
    • 由于flv.js在IE 11浏览器下的mseLiveFlvPlayback属性为false,FLV的直播流在Windows 8及以上系统的IE 11浏览器下无法播放。
    移动端 MP4 FLV M3U8 RTMP MP3
    iOS × ×
    Android × 4.0及以上版本 ×
    说明 H5播放器在移动端不支持FLV和RTMP的播放。
  • H5阿里云HLS加密播放,适配情况如下:
    加密 iOS Android PC
    标准加密
    • Chrome
    • FireFox
    • Safari
    • iEdge
    • IE 11及以上版本、Windows 8.1及以上版本
    私有加密 × Chrome for Android
    • Chrome
    • FireFox
    • Safari
    • iEdge
    • IE 11及以上版本、Windows 8.1及以上版本
    DRM加密
    说明 如果使用FairPlay,需要配置certId证书。
    • Safari
    • Chrome
    • Android 10及以上的Chrome
    • Edge
    说明 部分Android手机不支持。
    • Windows
      • Chrome
      • Opera
      • FireFox
      • IE 11及以上版本、Windows 10及以上版本
    • Mac
      • Chrome
      • Safari
      • FireFox
      • Opera
    说明 建议浏览器使用较新的版本。
    注意 Android和iOS的微信浏览器不支持直播DRM加密。
    加密播放:
    说明 阿里云私有加密推荐使用Chrome浏览器播放。
  • 启用私有加密的防调试
    通过引入aliiplayer-vod-anti-min.js文件开启防调试模式,考虑到在开发过程中的调试,您可以在发布的产品中引入,JavaScript文件的地址示例如下:
    <script src="https://g.alicdn.com/de/prismplayer/2.9.7/hls/aliplayer-vod-anti-min.js"></script>
    注意 如果关闭开发者工具页面还是无法刷新出来,需要在新的标签页里重新打开页面。

H5适配说明

全屏播放说明
  • 移动端浏览器:视频默认全屏播放,针对不同的情况需要不同的设置。
    • iOS App:如需实现内联播放,将Web播放器提供的playsinline属性设置为true,WebView设置为allowsInlineMediaPlayback即可。设置成功后在App里打开页面时视频就能以非全屏模式(即内联的方式)播放。
    • Android:Android系统会有不同的定制版本,每个版本对H5 video标签的实现都有差别,所以在Android系统上播放视频所展现的一致性,相比iOS系统要差很多,也可以设置playsinline属性为true,只需要终端浏览器支持内联播放,对于X5内核浏览器(微信,QQ浏览器)可以启用同层播放,达到类内联播放的目的。
  • Safari浏览器:iOS 10以下版本的Safari浏览器是无法禁止视频自动全屏播放。

自动播放说明

自动播放的限制来自于浏览器,并非是播放器的限制,所以在Web播放器中设置autolay属性为true是无效的,不会触发自动播放。
  • 移动端浏览器:由于移动端浏览器一直都是禁止自动播放,所以无法通过设置autoplay属性或者调用play()方法实现自动播放。如果想在移动端实现自动播放,可以通过用户手动触发播放(例如:监听用户的点击事件并调用play()方法)。
    说明 不排除部分浏览器和WebView允许自动播放,Android系统中较为常见。
  • Safari浏览器:macOS High Sierra Safari 11及以上版本限制自动播放。
  • Chrome浏览器:Chrome 55及以上版本限制自动播放。

部分功能说明

注意 如果播放器被劫持,播放器内的方法、功能等都会失效。
  • 音量调节功能:getVolumesetVolume方法在iOS系统和部分Android系统会失效。
  • 倍速播放功能:部分移动端浏览器不支持设置倍速,比如Android系统的微信。
  • 截图功能:由于安全问题或浏览器本身问题,部分移动端设备无法正常使用截图功能,截图为全黑,例如使用Android 4.4.1系统的设备。可以通过截图检测工具验证浏览器的支持情况。

导入引用文件

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

集成SDK

阿里云Web端播放器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.7/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.7/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,
            //播放方式五:使用DRM方式播放
            isDrm:true,
            vid:'34ecdedd081c426383cd66782de6656d',
            accessKeyId:'dd',
            securityToken:'dd',
            accessKeySecret:'dd'
            region:'cn-shanghai',//eu-central-1,ap-southeast-1,
            certId:'dd',//用于请求苹果证书
            },function(player){
                console.log('播放器创建好了。')
           });
        </script>
    </body>
</html>

您可以对播放器进行可视化的在线配置,请参见在线配置

说明
  • 播放直播流时需要将isLive设置为true。
  • 媒体处理播放的参数说明,请参见视频播放
  • 视频点播更多接口,请参见属性和接口说明

扫描体验

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