閱讀190 返回首頁    go windows

視頻播放__使用手冊_視頻點播-阿裏雲

<< 上一步：視頻管理

視頻播放

視頻服務提供了Web播放器及移動端（iOS、Andriod）播放器SDK。

1. 播放工具

1.1 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及以上版本支持。

Web 播放器在線定製請訪問此地址。

詳細定製說明請訪問 Web可定製播放器使用說明

視頻管理

示例代碼

自適應模式

  1. <!doctype html>
  2. <html>
  3.     <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  4.       <link rel="stylesheet" type="text/css"
  5.           href="//g.alicdn.com/de/prismplayer/1.4.10/skins/default/index-min.css">
  6.     <script src="//g.alicdn.com/de/prismplayer/1.4.10/prism-min.js"></script>
  8.     <script>
  9.     function InitPlayer(){
  10.     var player = new prismplayer({
  11.         id: "J_prismPlayer",    // 容器id
  12.         source: "https://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>
  20. <head>
  21. <title>自適應播放器示例</title>
  22. </head>
  24. <body> 
  25. <div id='J_prismPlayer' class='prism-player'></div>
  26. <script type="text/javascript">InitPlayer()</script></body>
  28. </html>

Flash 模式

  1. <!doctype html>
  2. <html>
  3.     <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  4.       <link rel="stylesheet" type="text/css"
  5.           href="//g.alicdn.com/de/prismplayer/1.4.10/skins/default/index-min.css">
  6.     <script src="//g.alicdn.com/de/prismplayer/1.4.10/prism-flash-min.js"></script>
  8.     <script>
  9.     function InitPlayer(){
  10.     var player = new prismplayer({
  11.         id: "J_prismPlayer",    // 容器id
  12.         source: "https://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>
  20. <head>
  21. <title>Flash播放器示例</title>
  22. </head>
  24. <body> 
  25. <div id='J_prismPlayer' class='prism-player'></div>
  26. <script type="text/javascript">InitPlayer()</script></body>
  28. </html>

HTML 5 模式

  1. <!doctype html>
  2. <html>
  3.     <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  4.       <link rel="stylesheet" type="text/css"
  5.           href="//g.alicdn.com/de/prismplayer/1.4.10/skins/default/index-min.css">
  6.     <script src="//g.alicdn.com/de/prismplayer/1.4.10/prism-h5-min.js""></script>
  8.     <script>
  9.     function InitPlayer(){
  10.     var player = new prismplayer({
  11.         id: "J_prismPlayer",    // 容器id
  12.         source: "https://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>
  20. <head>
  21. <title>Html5播放器示例</title>
  22. </head>
  24. <body> 
  25. <div id='J_prismPlayer' class='prism-player'></div>
  26. <script type="text/javascript">InitPlayer()</script></body>
  28. </html>

1.2. 移動端播放器SDK

支持格式：

  • 視頻格式： mp4、flv、m3u8，rtmp
  • 視頻編碼： H.264
  • 音頻編碼： AAC

媒體播放器SDK參考手冊

媒體播放器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="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://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 拖拽播放需要在點播加速域名屬性中開啟 拖拽播放 功能。

下一步：全局設置 >>

最後更新：2016-10-28 11:01:03

  上一篇：go 視頻管理__使用手冊_視頻點播-阿裏雲
  下一篇：go 全局設置__使用手冊_視頻點播-阿裏雲