全部产品
存储与CDN 数据库 安全 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 开发者工具 解决方案 物联网
媒体转码

web播放

更新时间:2017-11-17 15:49:17

如何正确选择播放器

如何连续播放视频

如何在PC上播放hls视频

如何处理Flash跨域访问

如何启用H5的同层播放

清晰度切换的使用

诊断工具的使用

skinLayout属性的配置

H5自定义错误UI

直播出错恢复处理

如何使用截图

如何使用延迟播放

如何实现自定义组件

如何在h5上播放flv视频

常见问题

更多demo和说明请参见文档Aliplayer播放器

扫码体验

扫描体验

  • 关键参数说明

    source:OSS或CDN的播放地址。

    vid:媒体转码服务的媒体Id。例如“5aa0276ff6204ace950f75acf9e6187b”

    domainRegion:mts转码所在区域(cn-shanghai、cn-beijing、cn-shenzhen、cn-hangzhou)。

    accId:STS AccessKeyId,参考播放-简介安全令牌

    accSecret:STS AccessKeySecret,参考播放-简介安全令牌

    stsToken:STS SecurityToken,参考播放-简介安全令牌

    authInfo:播放鉴权,参考播放-简介播放鉴权

  • 播放示例代码

    以媒体Id的播放方式为示例代码。

    1. <!DOCTYPE HTML>
    2. <head>
    3. <meta charset="UTF-8">
    4. <meta http-equiv="x-ua-compatible" content="IE=edge" >
    5. <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    6. <title>加密视频测试页面</title>
    7. <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.3.0/skins/default/aliplayer-min.css" />
    8. <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.3.0/aliplayer-flash-min.js"></script>
    9. </head>
    10. <body>
    11. <div class="prism-player" id="J_prismPlayer"></div>
    12. <script type="text/javascript">
    13. var region = 'cn-beijing';
    14. var vid = '';
    15. var stsId = '';
    16. var stsKey = '';
    17. var stsToken = '';
    18. var authInfo = '';
    19. var player = new Aliplayer({
    20. id: 'J_prismPlayer',
    21. width: '100%',
    22. height: '540px',
    23. barMode: 0,
    24. prismType: 1,
    25. vid: vid,
    26. autoplay: true,
    27. playsinline: true,
    28. accId: stsId,
    29. accSecret: stsKey,
    30. stsToken: stsToken,
    31. domainRegion: region,
    32. authInfo: authInfo,
    33. },function(player){
    34. console.log('播放器创建了');
    35. });
    36. </script>
    37. </body>
    38. </html>
本文导读目录