zoukankan      html  css  js  c++  java

  • 阿里云web播放器

    原文地址：https://help.aliyun.com/document_detail/51991.html?spm=5176.doc61109.6.703.ZTCYoi

    一、概念说明

    1. playAuth：视频播放的唯一凭证，每个播放凭证都绑定了用户的身份标识，不同用户的播放凭证不能互换，否则无法正常播放视频。另外，播放凭证是有时效性的（默认100秒）。具体参数获取方法查看文档 获取播放凭证。

    2. 防盗链：通过判断request请求头的refer是否来源于本站的方式来决定视频是否能被播放。（在点播或CDN控制台设置referer）具体设置方法查看防盗链设置。

    二、使用流程

    2.1 PlayAuth的播放流程

    流程：用户App获取上传凭证 -> 服务端下发上传凭证 -> 用户上传视频并获取vid -> 服务端获取播放凭证 -> 将播放凭证下发给客户端 -> 完成视频播放。playAuth播放

    注意：AppServer为用户App的服务端，需要用户使用服务端API或SDK自行开发。

    三、SDK集成

    3.1 支持格式

    阿里云Web播放器SDK，同时支持Flash和Html5两种播放技术。

    • Flash 模式：
      • 视频格式： mp4、flv、m3u8、rtmp
      • 视频编码： H.264
      • 音频编码： AAC、MP3
      • 音频格式：MP3

    flash支持加密播放点播加密说明

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

    3.2 适配情况

    • Flash 模式：
     mp4flvm3u8rtmpmp3
    iOS × × × × ×
    Android × × × × ×
    Chrome √ √ √ √ √
    Firefox √ √ √ √ √
    IE 8+ 8+ 8+ 8+ 8+
    Edge √ √ √ √ √
    Opera √ √ √ √ √
    Safari √ √ √ √ √
    • HTML5 模式：
     mp4flvm3u8rtmpmp3
    iOS √ × √ × √
    Android √ × 4.0+ × √
    Chrome √ 34+ 34+ × √
    Firefox √ 42+ 42+ × √
    IE IE9+ 11+ 11+ × IE9+
    Edge √ √ √ × √
    Opera √ √ √ × √
    Safari √ 8+ 8+ × √

    播放flv、m3u8视频，PC端支持的浏览器，需要启用允许跨域访问

    3.3 如何导入

    不依赖于任何的前端js库，只需要在页面中引用如下js文件，就可以进行播放器的初始化：

    1. https://g.alicdn.com/de/prismplayer/2.4.0/aliplayer-min.js

    这个文件同时包含了Flash和Html5跨终端自适应的逻辑。如果您只是想使用其中一种播放技术，也可以只引用对应技术的js文件，从而获得更小的文件体积：

    Flash版本:

    1. https://g.alicdn.com/de/prismplayer/2.4.0/aliplayer-flash-min.js

    Html5版本:

    1. https://g.alicdn.com/de/prismplayer/2.4.0/aliplayer-h5-min.js

    如果您的使用场景需要用到html5播放器，请额外引用css文件：

    1. https://g.alicdn.com/de/prismplayer/2.4.0/skins/default/aliplayer-min.css

    示例代码如下：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.4.0/skins/default/aliplayer-min.css" />
    5. <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.4.0/aliplayer-min.js"></script>
    6. </head>
    7. </html>

    四、SDK使用

    4.1 播放器简单使用说明

    初始化播放器，监听某个dom元素的点击事件来触发调用播放器的接口方法，同时对播放器暴露的事件进行监听。示例代码如下：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    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.4.0/skins/default/aliplayer-min.css" />
    8. <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.4.0/aliplayer-min.js"></script>
    9. </head>
    10. <body>
    11. <div class="prism-player" id="J_prismPlayer" style="position: absolute"></div>
    12. <script>
    13. var player = new Aliplayer({
    14. id: 'J_prismPlayer',
    15. width: '100%',
    16. autoplay: false,
    18. //支持播放地址播放,此播放优先级最高
    19. source : '播放url',
    21. //播放方式二：点播用户推荐
    22. vid : '1e067a2831b641db90d570b6480fbc40',
    23. playauth : '',
    24. cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
    26. //播放方式三：仅MTS用户使用
    27. vid : '1e067a2831b641db90d570b6480fbc40',
    28. accId: '',
    29. accSecret: '',
    30. stsToken: '',
    31. domainRegion: '',
    32. authInfo: ''
    33. },function(player){
    34. console.log('播放器创建好了。')
    35. });
    37. </script>
    38. </body>
    39. </html>

    播放直播流时需要将isLive设置为true。

    MTS播放的参数说明详见：MTS播放说明

    更多接口参考：web播放器接口文档

    4.2 连续播放

    假如有多个视频，在上一个视频播放完毕时，自动播放下一个视频，要怎么处理的呢？需要按使用的播放器类型和切换的地址格式，采用不同的实现方式。

    4.2.1 直接地址方式

    h5和flash的行为都是一致的，只需要订阅’ended’， 在ended事件里，调用loadByUrl方法， 参数为下一个视频的地址。

    1. function endedHandle()
    2. {
    3. var newUrl = "";
    4. player.loadByUrl(newUrl);
    5. }
    7. player.on("ended", endedHandle);

    4.2.2 vid+playauth播放方式

    • h5在ended事件里调用replayByVidAndPlayAuth方法，参数为vid和新的playauth值。示例如下：
    1. function endedHandle()
    2. {
    3. var newPlayAuth = "";
    4. player.replayByVidAndPlayAuth(vid,newPlayAuth);
    5. }
    7. player.on("ended", endedHandle);
    • flash没有提供切换vid和playauth的方法，需要销毁，重新创建播放器。示例如下：
    1. function endedHandle()
    2. {
    3. var newPlayAuth = "";
    4. player.dispose(); //销毁
    5. $('#J_prismPlayer').empty();//id为html里指定的播放器的容器id
    6. //重新创建
    7. player = new Aliplayer({
    8. id: 'J_prismPlayer',
    9. autoplay: true,
    10. playsinline:true,
    11. vid: vid,
    12. playauth:newPlayAuth,
    13. useFlashPrism:true
    14. });
    15. }
    16. }
    18. player.on("ended", endedHandle);

    注意：playauth的有效期只有100s， 调用replayByVidAndPlayAuth方法时，需要重新生产获取playauth

    4.2.3 地址协议不一样切换地处理

    如果原来播放的是mp4的视频，现在新的地址是hls的视频地址，这种情况只能重新创建播放器。示例如下：

    1. function endedHandle()
    2. {
    3. var newUrl = ""; //新的播放地址
    4. player.dispose(); //销毁
    5. $('#J_prismPlayer').empty(); //id为html里指定的播放器的容器id
    6. //重新创建
    7. player = new Aliplayer({
    8. id: 'J_prismPlayer',
    9. autoplay: true,
    10. playsinline:true,
    11. source:newUrl
    12. });
    13. }
    14. }
    16. player.on("ended", endedHandle);

    4.3 清晰度切换

    当前清晰度切换只有在使用阿里云点播和转码服务时通过vid方式播放时会自动开启。

    默认时按低清晰度到高清晰度，选择低清晰度的播放。

    通过设置qualitySort属性，启用时升序还是降序：

    • desc 表示按倒序排序(即：从大到小排序)

    • asc 表示按正序排序(即：从小到大排序)

    备注：

    1）H5播放器可以通过设置format属性选择播放mp4或mp3播放格式，默认为mp4格式播放。

    2）清晰度切换会记住用户当前选择的清晰度，下次重新打开播放视频时，会优先选择上次选择的清晰度，没有则按默认逻辑选择低清晰度播放。

    3）但用户选择的清晰度不能播放器时，会自动切换到下一个清晰度，并给提示，仅H5支持。

    4.4 截图

    Aliplayer2.1.0以上版本支持视频播放过程中的截图功能，图片类型为image/jpeg，返回当前播放时间、base64和二进制的图片数据。

    4.4.1 Flash开启截图功能

    Flash通过snapshot属性开启，设置snapshot:true

    4.4.2 H5开启截图功能

    在skinLayout数组里添加snapshot UI

    1. skinLayout:[
    2. {name:"bigPlayButton", align:"blabs", x:30, y:80},
    3. {
    4. name: "H5Loading", align: "cc"
    5. },
    6. {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
    7. {name: "infoDisplay", align: "cc"},
    8. {
    9. name:"controlBar", align:"blabs", x:0, y:0,
    10. children: [
    11. {name: "progress", align: "tlabs", x: 0, y: 0},
    12. {name: "playButton", align: "tl", x: 15, y: 26},
    13. {name: "timeDisplay", align: "tl", x: 10, y: 24},
    14. {name: "fullScreenButton", align: "tr", x: 20, y: 25},
    15. {name:"streamButton", align:"tr",x:10, y:23},
    16. {name:"speedButton", align:"tr",x:10, y:23},
    17. {name: "volume", align: "tr", x: 20, y: 25},
    18. {name: "snapshot", align: "tr", x: 20, y: 25}
    19. ]
    20. }
    21. ]

    h5播放flv视频，在safari浏览器下不支持截图功能，即使启用了，截图按钮也不会出现

    4.4.3 设置截图的大小和质量

    通过setSanpshotProperties(width,height,rate)方法设置截取图片的大小和图片质量, 大小默认为100%

    1. player.setSanpshotProperties("300px","200px",0.9)

    4.4.4 订阅截图事件

    截图完成时会触发snapshoted事件，并返回截图数据：

    • time: 截图的视频时间点
    • base64: 所截图的base64串可以直接用于img显示
    • binary: 所截图的二进制数据可以用于上传
    1. player.on("snapshoted", function(data) {
    3. console.log(data.paramData.time);
    4. console.log(data.paramData.base64);
    5. console.log(data.paramData.binary);
    7. });

    4.4.5 H5添加允许跨域访问的Header

    H5的截图是通过Canvas实现的，播放域名需添加允许跨域访问的Header, 可以参考跨域访问配置

    4.4.6 H5截图可以添加文字水印

    可以设置snapshotWatermark属性，包含属性有：

    名称说明
    left 到左边的距离
    top 左上角的高度，会包含文字的高度
    text 水印文字
    font 设置文字格式,可以多个属性一起设置，中间空格
    font-style font-weight font-size font-family
    strokeColor 设置用于笔触的颜色
    fillColor 填充绘画的颜色
    1. snapshotWatermark:{
    2. left:"100",
    3. top:"100",
    4. text:"测试水印",
    5. font:"italic bold 48px 宋体",
    6. strokeColor:"red"
    7. fillColor:'green'
    8. }

    4.5 其他功能使用

    如何定制皮肤

    skinLayout属性的配置

    关于跨域访问配置说明

    如何启用H5的在微信中同层播放

    直播出错恢复处理

    诊断工具的使用

    H5自定义错误UI

    如何实现自定义组件

    如何实现延迟播放

    五、扫描体验

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

    扫描体验

    六、注意事项

      1. 当H5播放视频时浏览器控制台出现No 'Access-Control-Allow-Origin' header is present on the requested resource.，请参考跨域访问设置。
      2. 当Flash播放器出现CNAME或资源跨域访问错误时，请参考跨域访问设置。
      3. Android微信或QQ浏览器上播放视频时,由于腾讯X5浏览器会挟持视频自动全屏播放，请参考如何启用H5的在微信中同层播放。
  • 相关阅读:
    【Git】为GitHub添加ssh配置
    【Linux】cmake编译指定 gcc/g++
    【Git】提交历史查看
    【AFL（十五）】LAVA-M服务器篇
    Docker实用技巧（五）：查看容器占用磁盘大小
    Docker实用技巧（四）：限制cpu数量
    【AFL（十四）】afl-plot 使用详解
    【AFL（十三）】afl-whatsup 使用详解
    Docker实用技巧（三）：容器与主机之间的端口映射
    【AFL（十二）】make文件管理
  • 原文地址：https://www.cnblogs.com/boonya/p/8249871.html
Copyright © 2011-2022 走看看