敬告:此 demo 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,九游会国际-九游会真人第一品牌。
♦ js-sdk 引用方式:
♦ 普通网页 script 方式加载:下载最新版 ,请在页面上调用 jsbridge 接口之前引用 jsbridge-mini.js 库;
♦ js module 方式引用:npm install ym-jsbridge
♦ 支持点播/直播/倍速/多码率/循环/横竖屏播放;
♦ 支持播放列表(原生 ui,多视频按序自动播放);
♦ 支持但不仅限于 ;
♦ 结合腾讯云视频服务可实现免费试看、付费看全片功能;
视频链接:
//全屏播放单个视频,直接提供视频链接即可 jsbridge.txvideo.play($("#videourl").val());
请配合 filesystem 文件系统 插件使用,先将视频下载到本地,使用 fs://... 地址播放。
//播放本地视频 jsbridge.txvideo.play('fs://file/my_dir/f10.mp4');
//方式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 参数 */
//不占用刘海区域 jsbridge.txvideo.play({ url : 'http://player.alicdn.com/video/editor.mp4', title : '不占用刘海(凹凸异形屏)区域', cutout: true });
//方式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开始的索引号 } */
//方式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 } } */
//保持当前屏幕方向(不强制横屏)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 });
//仅支持 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 列表中的视频序号 } */
仅支持 android 版;
可以将原生视频播放器嵌入 web 网页中,获得比 html5 video 标签更好的播放体验;