敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多。
♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20251019.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;
♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package
//添加播放器,在回调函数中获得播放器Id (playerId)
jsBridge.txVideo.addPlayer({
//指定播放器定位置(px)
top : 0,
left : 0,
//宽度(px), -1 为适应屏幕宽度
width : -1,
//高度(px),-1 为适应屏幕高度
height: playerPlaceHolder.height(),
//播放器事件,可选,如不接收事件可不提此属性
//回调参数:
//playerId 整数类型,播放器id(必有)
//event 整数类型,事件(必有),参考事件说明
//data 事件对应的数据(可选)
onEvent: function(playerId, event, data) {
console.log(playerId, event, JSON.stringify(data));
}
}, function(playerId) {
if (playerId > 0) {
alert(playerId);
} else {
alert("添加失败");
}
});
/*
onEvent 回调参数 event 事件说明:
10 E_Play_Prepared 已缓冲完成,可立即播放
11 E_Play_Begin 开始播放
12 E_Play_Progress 播放进度,data 参数
{
progress: 12, //数字类型,已播时长(秒)
duration: 89 //数字类型,总时长(秒)
}
13 E_Play_End 播放结束
*/
//从当前网页移除指定的播放器 jsBridge.txVideo.removePlayer(playerId);
jsBridge.txVideo.play({
playerId : 1,
url : 'http://player.alicdn.com/video/editor.mp4',
title : '方式1:URL 链接',
qualityName: '超清',
loop : true,
//全屏播放时是否保留刘海(凹凸屏)区域,默认 false 即不保留(全屏视频会占用刘海区域)
cutout : false
});
/*
支持播放 方式1、方式2、方式3 的任何一种,增加 playerId 参数即可。
*/