阿里云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.16/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
      • Edge
    • Mac
      • Chrome
      • Safari
      • FireFox
      • Opera
      • Edge
    说明 建议浏览器使用较新的版本。
    注意 Android和iOS的微信浏览器不支持直播DRM加密。
    加密播放:
    说明 阿里云私有加密推荐使用Chrome浏览器播放。

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

集成SDK

阿里云Web端播放器SDK除了直接支持Source播放方式外,还支持通过阿里云视频云服务的video方式播放:

集成前,请仔细阅读适配说明H5适配说明内容,按相关要求配置,以避免集成失败或播放失败。

示例代码如下所示:
<!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.16/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.16/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,
            cover: '<your cover URL>',//可选公共参数。视频封面图片地址。用户自定义的可以被访问到的网络图片。本参数传入的URL优先级最高,会覆盖通过获取视频播放凭证接口获取的CoverURL。
            // 播放方式一、播放地址播放。此方式播放优先级最高。
            source : '<your play URL>',//播放方式一必选参数。可以是第三方直播或点播地址、阿里云直播服务中的播放地址,或阿里云点播服务中的播放地址。
            // 播放方式二:推荐点播用户使用
            vid : '<your video ID>',//播放方式二必选参数。可以通过点播控制台(媒资库>音/视频路径)查询。示例:1e067a2831b641db90d570b6480f****。
            playauth : '<your PlayAuth>',//播放方式二必选参数。参数值可通过调用GetVideoPlayAuth接口获取。
            encryptType: 1, //使用播放方式二,当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
            // 播放方式三:仅MPS用户使用
            vid : '<your media ID in MPS>',//播放方式三必选参数。可以通过媒体处理控制台(媒体管理>媒体列表路径)查询。示例:1e067a2831b641db90d570b6480f****。
            accId: '<your AccessKey ID>',//播放方式三必选参数。可通过RAM控制台(AccessKey管理页面)创建AccessKey,或者查看已有AccessKey Id的AccessKey Secret。
            accSecret: '<your AccessKey Secret>',//播放方式三必选参数。
            stsToken: '<your STS token>',//播放方式三必选参数。视频播放的临时凭证。凭证需要提前生成。生成方式请参考视频播放。
            domainRegion: '<your domain region>',//播放方式三必选参数。媒体资源所在的区域(cn-shanghai,cn-hangzhou等)。
            authInfo: '<your auth info>',//播放方式三必选参数。authInfo需要提前生成。生成方式请参考视频播放。
            // 播放方式四:使用STS方式播放。点播用户可在播放方式二或播放方式四中选择一个使用。
            vid : '<your video ID>',//播放方式四必选参数。可以通过点播控制台(媒资库>音/视频路径)查询。示例:1e067a2831b641db90d570b6480f****。
            accessKeyId: '<your AccessKey ID>',//播放方式四必选参数。可通过RAM访问控制控制台的AccessKey管理页面创建AccessKey,或者查看已有AccessKey Id的AccessKey Secret。
            securityToken: '<your STS token>',//播放方式四必选参数。视频播放的临时凭证。凭证需要提前生成。生成方式请参考创建角色并进行STS临时授权。
            accessKeySecret: '<your AccessKey Secret>',//播放方式四必选参数。可通过RAM访问控制控制台的AccessKey管理页面创建AccessKey,或者查看已有AccessKey Id的AccessKey Secret。
            region: '<region of your video>', // 播放方式四必选参数。媒体资源所在的区域。如cn-shanghai、eu-central-1, ap-southeast-1等。
            // 播放方式五:使用DRM方式播放。只有DRM加密视频能使用。
            isDrm: true,
            vid: '<your video ID>',//播放方式五必选参数。可以通过点播控制台(媒资库>音/视频路径)查询。示例:1e067a2831b641db90d570b6480f****。
            accessKeyId: '<your AccessKey ID>',//播放方式五必选参数。可通过RAM访问控制控制台的AccessKey管理页面创建AccessKey,或者查看已有AccessKey Id的AccessKey Secret。
            securityToken: '<your STS token>',//播放方式五必选参数。视频播放的临时凭证。凭证需要提前生成。生成方式请参考创建角色并进行STS临时授权。
            accessKeySecret: '<your AccessKey Secret>',//播放方式五必选参数。可通过RAM访问控制控制台的AccessKey管理页面创建AccessKey,或者查看已有AccessKey Id的AccessKey Secret。
            region: '<region of your video>', // 播放方式五必选参数。媒体资源所在的区域。如cn-shanghai、eu-central-1, ap-southeast-1等。
            certId: '<your certificate ID>', // 仅苹果设备播放需要。用于请求苹果证书,可根据DRM加密的实现到视频点播或视频直播控制台获取。
            },function(player){
              console.log('The player is created.')
           });
        </script>
    </body>
</html>

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

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

扫描体验

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