视立方 · 播放器 -九游会国际

webapp快捷打包
视立方 · 播放器
转到模块插件

敬告:此 demo 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,九游会国际-九游会真人第一品牌

js-sdk 引用方式:

♦ 普通网页 script 方式加载:下载最新版 ,请在页面上调用 jsbridge 接口之前引用 jsbridge-mini.js 库;

♦ js module 方式引用:npm install ym-jsbridge

♦ 支持点播/直播/倍速/多码率/循环/横竖屏播放;

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

♦ 支持但不仅限于 ;

♦ 结合腾讯云视频服务可实现免费试看、付费看全片功能;

play 全屏播放 简单示例

视频链接:

//全屏播放单个视频,直接提供视频链接即可
jsbridge.txvideo.play($("#videourl").val());

play 播放本地视频

请配合 filesystem 文件系统 插件使用,先将视频下载到本地,使用 fs://... 地址播放。

//播放本地视频
jsbridge.txvideo.play('fs://file/my_dir/f10.mp4');

play 全屏播放 方式1:url 链接

//方式1:url 链接
jsbridge.txvideo.play({
  url        : 'https://vfx.mtime.cn/video/2019/12/30/mp4/191230190451257319.mp4',
  title      : '方式1:url 链接',
  //数字,播放方式
  //0 自动播放
  //1 手动播放
  //2 预加载
  playaction : 0,
  //字符串,封面图片链接
  coverpictureurl: "",
  //json 对象,动态水印
  water: {
    //字符串,水印文字
    text: "",
    //文字大小
    size: 30,
    //文字颜色
    color: "#80ffffff"
  },
  cutout: false,
  keeporientation: false,
  loop: true
});
/*
参数说明
{
  url             : '',   //必须,字符串类型,视频链接
  title           : '',   //可选,字符串类型,视频名称,显示在 ui 上
  qualityname     : '',   //可选,字符串类型,码率名称(如 标清/高清/超清/1080p/4k 等)
  playaction      : 0,    //可选,数字类型,播放方式
  coverpictureurl : "",   //可选,字符串类型,封面图片链接
  water           :       //可选,json 类型,动态水印
  cutout          : '',   //可选,布尔类型,是否保留刘海(凹凸屏)区域,默认 false 即不保留(视频会占用刘海区域)
  keeporientation : false //可选,布尔类型,是否保持当前屏幕方向(true 保持当前屏幕方向不变,false 切换为横屏),默认 false
  loop            : false //可选,布尔类型,是否循环播放,默认 false
}
以下 方式2、方式3 均支持 keeporientation 和 loop 参数
*/

play 全屏播放 方式1:url 链接 - 不占用刘海区域

//不占用刘海区域
jsbridge.txvideo.play({
  url   : 'http://player.alicdn.com/video/editor.mp4',
  title : '不占用刘海(凹凸异形屏)区域',
  cutout: true
});

play 全屏播放 方式2:多码率 url 链接

//方式2:多码率 url 链接
jsbridge.txvideo.play({
  multiurls       : [
    {
      url        : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f10.mp4',
      qualityname: '流畅'
    },
    {
      url        : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f20.mp4',
      qualityname: '标清'
    },
    {
      url        : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f30.mp4',
      qualityname: '高清'
    }
  ],
  title           : '方式2:多码率 url 链接',
  playdefaultindex: 1
});
/*
参数说明:
{
  multiurls       : [   //必须,多码率数组
    {
      url        : '',  //必须,字符串类型,视频链接
      qualityname: ''   //必须,字符串类型,码率名称(如 标清/高清/超清/1080p/4k 等)
    },
    ...
  ],
  title           : '', //可选,字符串类型,视频名称,显示在 ui 上
  playdefaultindex: 0   //可选,数字类型,默认播放码率的 index,即 multiurls 中从0开始的索引号
}
*/

play 全屏播放 方式3:腾讯云视频

//方式3:腾讯云视频,请参见 https://cloud.tencent.com/product/vod
//结合腾讯云视频服务可实现免费试看、付费看全片功能
jsbridge.txvideo.play({
  appid   : 1256993030,
  title   : '腾讯云视频',
  videoid : {
    fileid: '7447398157015849771',
    psign : ''
  }
});
/*
参数说明:
{
  appid   : 0,  //必须,数字类型,腾讯云服务 appid
  title   : '', //可选,字符串类型,视频名称,显示在 ui 上
  videoid : {   //必须,腾讯云视频 videoid(fileid)
    fileid: '', //必须,字符串类型,腾讯云视频 fileid
    psign : ''  //可选,防盗链授权签名,如开启了防盗链则必填,算法请参考 https://cloud.tencent.com/document/product/266/45554
  }
}
*/

play 全屏播放:保持当前屏幕方向不变

//保持当前屏幕方向(不强制横屏)keeporientation: true
//请参考 全屏播放方式一 的参数说明
jsbridge.txvideo.play({
  url        : 'https://734.cdn-vod.huaweicloud.com/asset/c4aec16ec296cb8964f80845000cb958/play_video/fcb8827219c07153131eff228583e5a1_h.264_1280x720_heaacv1_1500.mp4',
  title      : '保持当前屏幕方向',
  qualityname: '超清',
  keeporientation: true,
  loop       : true
});

playlist 播放列表

//仅支持 android 版
//播放列表,按顺序自动连续播放
jsbridge.txvideo.playlist({
  title: '这是播放列表的名称',
  //必须,数组类型,视频源列表
  items: [
    {
       //列表图片
       poster: 'https://i.yimenyun.net/sys/player2.jpg',
       url   : 'https://734.cdn-vod.huaweicloud.com/asset/c4aec16ec296cb8964f80845000cb958/play_video/fcb8827219c07153131eff228583e5a1_h.264_1280x720_heaacv1_1500.mp4',
       title : '华为消费者业务品牌主题曲 dream it possible',
       desc  : '时长 03:58'
    },
    {
       poster: 'http://1252463788.vod2.myqcloud.com/e12fcc4dvodgzp1252463788/28742df34564972819219071568/4564972819209692959.jpeg',
       appid    : 1252463788,
       videoid  : {
         fileid : '4564972819219071568',
         psign  : ''
       },
       title : '腾讯云视频',
       desc  : '与美女对话'
    },
    {
       poster: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/1536584350_1812858038.100_0.jpg',
       multiurls     : [
        {
          url        : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f10.mp4',
          qualityname: '流畅'
        },
        {
          url        : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f20.mp4',
          qualityname: '标清'
        },
        {
          url        : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f30.mp4',
          qualityname: '高清'
        }
      ],
      title           : 'mp4点播 多码率 url 链接',
      playdefaultindex: 1
    },
    {
       poster: 'https://i.yimenyun.net/sys/player4.jpg',
       url   : 'http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.mp4',
       title : 'mp4点播 motor live'
    },
    {
       poster: '',
       url   : 'http://5815.liveplay.myqcloud.com/live/5815_89aad37e06ff11e892905cb9018cf0d4_900.flv',
       title : 'flv 直播流'
    },
    {
       poster: 'https://i.yimenyun.net/sys/player5.jpg',
       url   : 'http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-l1.m3u8',
       title : 'hls(m3u8) 直播流'
    }
  ],
  //可选,数字类型,开始播放的视频序号,默认 0(第一个)
  playdefaultindex: 0,
  //可选,布尔类型,是否循环播放视频列表,默认 false
  loop            : false,
  //可选,布尔类型,是否保留刘海(凹凸屏)区域,默认 false 即不保留(全屏视频会占用刘海区域)
  cutout: false
});
/*
参数说明:
{
  title: '', //可选,字符串类型,播放列表名称,显示在标题栏上
  items: [   //必须,视频列表清单数组
    {        //以上 play 方式1, 2, 3 播放参数的任意组合
    },
    ...
  ],
  playdefaultindex: 0 //可选,默认开始播放 items 列表中的视频序号
}
*/

高级用法 在 web 页面中嵌入播放器

仅支持 android 版;

可以将原生视频播放器嵌入 web 网页中,获得比 html5 video 标签更好的播放体验;

网站地图