全部产品
媒体转码

视频播放

更新时间:2017-09-25 14:08:19   分享:   

视频播放

视频服务提供了Web播放器及移动端(iOS、Andriod)播放器SDK。

1. 播放工具

1.1 Aliplayer Web 播放器

Web播放器有Flash、HTML5及自适应模式。

支持格式:

  • Flash 模式:

    • 视频格式: mp4、flv、m3u8、rtmp、mp3
    • 视频编码: H.264
    • 音频编码: AAC、MP3
  • HTML5 模式:

    • 视频格式: mp4、m3u8
    • 视频编码: H.264
    • 音频编码: AAC

    m3u8格式播放依赖调用端浏览器支持情况:

    • iOS全系列支持,Android 4.0及以上版本支持;

    • PC端支持的浏览器:

      • Chrome for Desktop 34+
      • Firefox for Desktop 42+
      • IE11+ for Windows 8.1+
      • Edge for Windows 10+
      • Opera for Desktop
      • Safari for Mac 8+ (beta)

详细定制说明请访问 Web可定制播放器使用说明

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

扫码体验

扫描体验

视频管理

示例代码

自适应模式

  1. <!doctype html>
  2. <html>
  3. <meta http-equiv="x-ua-compatible" content="IE=edge" >
  4. <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  5. <link rel="stylesheet" type="text/css"
  6. href="//g.alicdn.com/de/prismplayer/2.0.1/skins/default/aliplayer-min.css">
  7. <script src="//g.alicdn.com/de/prismplayer/2.0.1/aliplayer-min.js"></script>
  8. <script>
  9. function InitPlayer(){
  10. var player = new Aliplayer({
  11. id: "J_prismPlayer", // 容器id
  12. source: "http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4", // 视频url 支持互联网可直接访问的视频地址
  13. autoplay: true, // 自动播放
  14. width: "100%", // 播放器宽度
  15. height: "400px" // 播放器高度
  16. });
  17. }
  18. </script>
  19. <head>
  20. <title>自适应播放器示例</title>
  21. </head>
  22. <body>
  23. <div id='J_prismPlayer' class='prism-player'></div>
  24. <script type="text/javascript">InitPlayer()</script></body>
  25. </html>

Flash 模式

  1. <!doctype html>
  2. <html>
  3. <meta http-equiv="x-ua-compatible" content="IE=edge" >
  4. <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  5. <link rel="stylesheet" type="text/css"
  6. href="//g.alicdn.com/de/prismplayer/2.0.1/skins/default/aliplayer-min.css">
  7. <script src="//g.alicdn.com/de/prismplayer/2.0.1/aliplayer-flash-min.js"></script>
  8. <script>
  9. function InitPlayer(){
  10. var player = new Aliplayer({
  11. id: "J_prismPlayer", // 容器id
  12. source: "http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4", // 视频url 支持互联网可直接访问的视频地址
  13. autoplay: true, // 自动播放
  14. width: "100%", // 播放器宽度
  15. height: "400px" // 播放器高度
  16. });
  17. }
  18. </script>
  19. <head>
  20. <title>Flash播放器示例</title>
  21. </head>
  22. <body>
  23. <div id='J_prismPlayer' class='prism-player'></div>
  24. <script type="text/javascript">InitPlayer()</script></body>
  25. </html>

HTML 5 模式

  1. <!doctype html>
  2. <html>
  3. <meta http-equiv="x-ua-compatible" content="IE=edge" >
  4. <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  5. <link rel="stylesheet" type="text/css"
  6. href="//g.alicdn.com/de/prismplayer/2.0.1/skins/default/aliplayer-min.css">
  7. <script src="//g.alicdn.com/de/prismplayer/2.0.1/aliplayer-h5-min.js""></script>
  8. <script>
  9. function InitPlayer(){
  10. var player = new Aliplayer({
  11. id: "J_prismPlayer", // 容器id
  12. source: "http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4", // 视频url 支持互联网可直接访问的视频地址
  13. autoplay: true, // 自动播放
  14. width: "100%", // 播放器宽度
  15. height: "400px" // 播放器高度
  16. });
  17. }
  18. </script>
  19. <head>
  20. <title>Html5播放器示例</title>
  21. </head>
  22. <body>
  23. <div id='J_prismPlayer' class='prism-player'></div>
  24. <script type="text/javascript">InitPlayer()</script></body>
  25. </html>

1.2. 移动端播放器SDK

支持格式:

  • 视频格式: mp4、flv、m3u8,rtmp
  • 视频编码: H.264
  • 音频编码: AAC

媒体播放器SDK参考手册

2. 播放服务端设置

2.1. M3U8播放

使用Flash播放器在线播放M3U8文件,需要在M3U8文件所在Bucket根目录下放置crossdomain.xml文件,文件中包含Flash播放器所在域名,否则无法播放。

使用媒体转码控制台预览您的M3U8文件,请在该M3U8文件所在Bucket根目录下放置如下内容的crossdomain.xml文件:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <cross-domain-policy xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.adobe.com/xml/schemas/PolicyFile.xsd">
  3. <allow-access-from domain="g.alicdn.com"/>
  4. </cross-domain-policy>

其中 g.alicdn.com 是阿里云Web播放器所在的域名,如您使用其他的Flash播放器,将播放器所在的域名添加一条新的allow-access-from domain记录即可。

2.2. 拖拽播放

MP4、FLV 拖拽播放需要在点播加速域名属性中开启 拖拽播放 功能。

本文导读目录
本文导读目录
以上内容是否对您有帮助?