一门APP开发教程

标题: 超级播放器的常用调用方法 [打印本页]

作者: 曾清    时间: 2020-2-13 15:18
标题: 超级播放器的常用调用方法
超级播放器的常用调用方法
相关demo参考:https://www.yimenapp.com/doc/demo_txvideo.cshtml
主要功能点
  1. ♦ 支持点播/直播/倍速/多码率播放;

  2. ♦ 支持播放列表(原生 UI,多视频按序自动播放);

  3. ♦ 支持 腾讯云视频;
复制代码
常用调用方法
1.play 全屏播放 简单示例
  1. //全屏播放单个视频,直接提供视频链接即可
  2. jsBridge.txVideo.play('http://player.alicdn.com/video/editor.mp4');
复制代码


2.play 全屏播放 方式1:URL 链接
  1. //方式1:URL 链接
  2. jsBridge.txVideo.play({
  3.   url        : 'http://player.alicdn.com/video/editor.mp4',
  4.   title      : '方式1:URL 链接',
  5.   qualityName: '超清'
  6. });

  7. /*
  8. 参数说明
  9. {
  10.   url        : '', //必须,字符串类型,视频链接
  11.   title      : '', //可选,字符串类型,视频名称,显示在 UI 上
  12.   qualityName: ''  //可选,字符串类型,码率名称(如 标清/高清/超清/1080P/4K 等)
  13. }
  14. */
复制代码


3.play 全屏播放 方式2:多码率 URL 链接
  1. //方式2:多码率 URL 链接
  2. jsBridge.txVideo.play({
  3.   multiURLs       : [
  4.     {
  5.       url        : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f10.mp4',
  6.       qualityName: '流畅'
  7.     },
  8.     {
  9.       url        : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f20.mp4',
  10.       qualityName: '标清'
  11.     },
  12.     {
  13.       url        : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f30.mp4',
  14.       qualityName: '高清'
  15.     }
  16.   ],
  17.   title           : '方式2:多码率 URL 链接',
  18.   playDefaultIndex: 1
  19. });

  20. /*
  21. 参数说明:
  22. {
  23.   multiURLs       : [   //必须,多码率数组
  24.     {
  25.       url        : '',  //必须,字符串类型,视频链接
  26.       qualityName: ''   //必须,字符串类型,码率名称(如 标清/高清/超清/1080P/4K 等)
  27.     },
  28.     ...
  29.   ],
  30.   title           : '', //可选,字符串类型,视频名称,显示在 UI 上
  31.   playDefaultIndex: 0   //可选,数字类型,默认播放码率的 index,即 multiURLs 的索引号
  32. }
  33. */
复制代码


4.play 全屏播放 方式3:腾讯云视频
  1. //方式3:腾讯云视频,请参见 https://cloud.tencent.com/product/vod
  2. jsBridge.txVideo.play({
  3.   appId   : 1256993030,
  4.   title   : '腾讯云视频',
  5.   videoId : {
  6.     fileId : '7447398157015849771'
  7.   }
  8. });

  9. /*
  10. 参数说明:
  11. {
  12.   appId   : 0,  //必须,数字类型,腾讯云服务 AppId
  13.   title   : '', //可选,字符串类型,视频名称,显示在 UI 上
  14.   videoId : {   //必须,腾讯云视频 VideoId(FileId)
  15.     fileId : '', //必须,字符串类型,腾讯云视频 FileId
  16.     timeout: '', //可选,字符串类型,加密链接超时时间戳,转换为16进制小写字符串,腾讯云 CDN 服务器会根据该时间判断该链接是否有效
  17.     us     : '', //可选,字符串类型,唯一标识请求,增加链接唯一性
  18.     sign   : '', //可选,字符串类型,防盗链签名
  19.     exper  : -1  //可选,数字类型,试看时长,单位:秒
  20.   }
  21. }
  22. */
复制代码


5.playList 播放列表
  1. //播放列表,按顺序自动连续播放
  2. jsBridge.txVideo.playList({
  3.   title: '这是播放列表的名称',
  4.   items: [
  5.     {
  6.        //列表图片
  7.        poster: 'https://s.yimenyun.net/sys/player2.jpg',
  8.        url   : 'https://734.cdn-vod.huaweicloud.com/asset/c4aec16ec296cb8964f80845000cb958/play_video/fcb8827219c07153131eff228583e5a1_H.264_1280X720_HEAACV1_1500.mp4',
  9.        title : '华为消费者业务品牌主题曲 Dream It Possible',
  10.        desc  : '时长 03:58'
  11.     },
  12.     {
  13.        poster: 'http://1252463788.vod2.myqcloud.com/e12fcc4dvodgzp1252463788/28742df34564972819219071568/4564972819209692959.jpeg',
  14.        appId    : 1252463788,
  15.        videoId  : {
  16.          fileId : '4564972819219071568'
  17.        },
  18.        title : '腾讯云视频',
  19.        desc  : '与美女对话'
  20.     },
  21.     {
  22.        poster: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/1536584350_1812858038.100_0.jpg',
  23.        multiURLs     : [
  24.         {
  25.           url        : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f10.mp4',
  26.           qualityName: '流畅'
  27.         },
  28.         {
  29.           url        : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f20.mp4',
  30.           qualityName: '标清'
  31.         },
  32.         {
  33.           url        : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f30.mp4',
  34.           qualityName: '高清'
  35.         }
  36.       ],
  37.       title           : 'MP4点播 多码率 URL 链接',
  38.       playDefaultIndex: 1
  39.     },
  40.     {
  41.        poster: 'https://s.yimenyun.net/sys/player4.jpg',
  42.        url   : 'http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.mp4',
  43.        title : 'MP4点播 Motor Live'
  44.     },
  45.     {
  46.        poster: '',
  47.        url   : 'http://5815.liveplay.myqcloud.com/live/5815_89aad37e06ff11e892905cb9018cf0d4_900.flv',
  48.        title : 'FLV 直播流'
  49.     },
  50.     {
  51.        poster: 'https://s.yimenyun.net/sys/player5.jpg',
  52.        url   : 'http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.m3u8',
  53.        title : 'HLS(m3u8) 直播流'
  54.     }
  55.   ],
  56.   playDefaultIndex: 0
  57. });

  58. /*
  59. 参数说明:
  60. {
  61.   title: '', //可选,字符串类型,播放列表名称,显示在标题栏上
  62.   items: [   //必须,视频列表清单数组
  63.     {        //以上 play 方式1, 2, 3 播放参数的任意组合
  64.     },
  65.     ...
  66.   ],
  67.   playDefaultIndex: 0 //可选,默认开始播放 items 列表中的视频序号
  68. }
  69. */
复制代码







欢迎光临 一门APP开发教程 (https://bbs.yimenapp.com/) Powered by Discuz! X3.4