阅读190 返回首页    go 新东方

视频播放__使用手册_视频点播-阿里云

<< 上一步：视频管理

视频播放

视频服务提供了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 全局设置__使用手册_视频点播-阿里云