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

web播放器常见问题

更新时间:2017-08-21 20:23:28

1: 哪些浏览器支持flash

A:播放应该都支持flash播放, 但是最新的一些浏览器会禁用flash,需要手工启用, 参考下面的链接:
IE: https://answers.microsoft.com/zh-hans/ie/forum/ie11-iewindows8_1/windows-81ie/99696880-fbd9-4ac4-b43c-45fbb06f84e5
Firefox: https://support.mozilla.org/zh-CN/kb/Flash%E6%8F%92%E4%BB%B6#w_uiiunigoce-flash
Chrome: https://helpx.adobe.com/cn/flash-player/kb/enabling-flash-player-chrome.html

2: flash播放器对mp4/flv无法拖拽

mp4与flv拖拽需要cdn添加支持,是通过播放器发送带时间的请求到cdn,cdn返回该时间段的视频数据。如果要实现拖拽,需要以下两个条件:

  1. 文件索引信息需要在视频的头部,mp4包含视频时间戳等索引信息,以及flv的meta信息要在视频最前面,播放器解析到视频索引信息后,才可以依据拖拽的位置通过索引信息拿到指定位置的数据点,去向cdn发送请求;
  2. cdn支持带时间/byte range的请求,需要在cdn控制台开启

A:参考:
https://help.aliyun.com/document_detail/27130.html?spm=5176.product27099.6.589.c1YuOT

3: Chrome浏览器不能播放m3u8

A:m3u8在PC端的一些浏览器不支持播放例如:Chrome,建议使用flash播放器

4:UI自定义

H5可以自定义css, flash具体参考:https://help.aliyun.com/document_detail/44234.html?spm=5176.doc43549.2.1.p3cQ5p

5:在微信里如何自动播放

  1. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  2. <script>
  3. function autoPlay() {
  4. wx.config({
  5. // 配置信息, 即使不正确也能使用 wx.ready
  6. debug: false,
  7. appId: '',
  8. timestamp: 1,
  9. nonceStr: '',
  10. signature: '',
  11. jsApiList: []
  12. });
  13. wx.ready(function() {
  14. var video=$(player.el()).find('video')[0];
  15. video.play();
  16. });
  17. };
  18. // 解决ios不自动播放的问题
  19. autoPlay();
  20. </script>

6:播放器如何初始播放位置

H5播放器:

  1. var seeked = false;
  2. player.on('canplaythrough',function (e) {
  3. if(!seeked)
  4. {
  5. seeked = true;
  6. player.seek(100);
  7. }
  8. });

Flash 播放器:

  1. var seeked = false;
  2. player.on('loadedmetadata',function (e) {
  3. if(!seeked)
  4. {
  5. seeked = true;
  6. player.seek(20);
  7. }
  8. });

7:如何禁用进度条

自定义skinLayout属性, 去掉整个controlBar或者controlBar下面的子项, 比如progress:

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

8:如何切换vid和playauth

H5播放器,直接调用reloaduserPlayInfoAndVidRequestMts方法:

  1. player.reloaduserPlayInfoAndVidRequestMts(newVid, newPlayAuth)

Flash播放器需要销毁,根据新的vid和playauth重新创建一个:

  1. //销毁
  2. flashPlayer.dispose();
  3. $('#flashPlayer').empty();
  4. //重新创建
  5. flashPlayer = new prismplayer({
  6. id: 'flashPlayer',
  7. autoplay: true,
  8. playsinline:true,
  9. vid: newVid,
  10. playauth: newPlayAuth,
  11. useFlashPrism:true
  12. });

8:如何切换vid和playauth

H5播放器,直接调用reloaduserPlayInfoAndVidRequestMts方法:

  1. player.reloaduserPlayInfoAndVidRequestMts(newVid, newPlayAuth)

Flash播放器需要销毁,根据新的vid和playauth重新创建一个:

  1. //销毁
  2. flashPlayer.dispose();
  3. $('#flashPlayer').empty();
  4. //重新创建
  5. flashPlayer = new prismplayer({
  6. id: 'flashPlayer',
  7. autoplay: true,
  8. playsinline:true,
  9. vid: newVid,
  10. playauth: newPlayAuth,
  11. useFlashPrism:true
  12. });

9:如何定时获取播放时间

通过定时器每秒调用播放器的getCurrentTime方法获取播放时间, 在暂停、出错和结束播放时清除定时器。

  1. var timer = null;
  2. function getTime()
  3. {
  4. var currentTime = player.getCurrentTime();
  5. //to do
  6. timer = setTimeout(getTime,1000);
  7. }
  8. //清除定时器
  9. function clear()
  10. {
  11. if(timer)
  12. {
  13. clearTimeout(timer);
  14. timer = null;
  15. }
  16. }
  17. player.on('ended',function (e) {
  18. clear();
  19. });
  20. player.on('pause',function (e) {
  21. clear();
  22. });
  23. player.on('error',function (e) {
  24. clear();
  25. });

10:如何调整H5播放器的播放按钮的大小和位置

重写CSS,比如减小一倍:

  1. .prism-player .prism-big-play-btn {
  2. width: 45px;
  3. height: 45px;
  4. background-size: 128px 256px;
  5. }

位置可以通过设置skinLayout里bigPlayButton的x,y属性:

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

11:手机端播放视频不希望弹出全屏,要小窗播放问题

  • 手机端不希望全屏播放,iOS可以设置属性playsinline:true。
  • Android手机在微信和QQ浏览器里自动全屏播放,这是腾讯浏览器的内置行为,不能修改,原因是由于腾讯浏览器挟持了video标签,由腾讯内置的播放器播放视频。

12:启用IE浏览器以最高级别的可用模式显示内容

小于IE10的浏览器需要启用最高级别的可用模式显示内容模式:

  1. <meta http-equiv="x-ua-compatible" content="IE=edge" >

13:Flash播放器播放m3u8提示跨域错误

播放器跨域访问时需要添加策略文件,即在视频播放链接所在域名的根目录下,添加crossdomain.xml文件,其中添加播放器所在域名的权限,例如:http://test1.com/app/test.m3u8需要添加http://test1.com/crossdomain.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <cross-domain-policy>
  3. <allow-access-from domain="*"/>
  4. <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
  5. </cross-domain-policy>

14. Flash播放器封面图片无法显示

  • 确认cover字段输入url是否有效
  • 确认cover输入的url所在域名是否存在有效的crossdomain.xml文件
本文导读目录