WebApp快捷打包
视频播放器
转到模块插件

敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多

JS-SDK 引用方式:

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

♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package

play 播放视频 播放链接

//在独立窗口播放视频链接
jsBridge.video.play('http://player.alicdn.com/video/editor.mp4');

play 播放视频 旋转为横屏

//旋转为横屏
jsBridge.video.play({
  //视频链接,字符串类型,必须
  url       : 'http://player.alicdn.com/video/editor.mp4',
  //名称,字符串类型,可选,默认无
  title     : '一个测试视频',
  //封面图链接,字符串类型,可选,默认无
  cover     : 'http://i.cdn.yimenapp.com/sys/player.png',
  //是否横屏全屏,布尔类型,可选,默认 true
  //true 旋转为横屏,false 保持当前屏幕方向不变
  fullscreen: true,
  //是否自动播放,布尔类型,可选,默认 true
  autoplay  : true,
  //样式主题,字符串类型,可选,默认 blue
  //可用主题:
  //蓝色 blue
  //绿色 green
  //橙色 orange
  //红色 red
  theme     : 'blue'
});

play 播放视频 屏幕方向不变

//屏幕方向不变
jsBridge.video.play({
  url       : 'https://734.cdn-vod.huaweicloud.com/asset/c4aec16ec296cb8964f80845000cb958/play_video/fcb8827219c07153131eff228583e5a1_H.264_1280X720_HEAACV1_1500.mp4',
  title     : '一个测试视频',
  cover     : 'http://i.cdn.yimenapp.com/sys/player2.png',
  fullscreen: false,
  autoplay  : true,
  theme     : 'blue'
});

自动识别 识别视频链接,自动全屏播放

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

转到

可以将原生视频播放器嵌入 Web 网页中,获得比 HTML5 Video 标签更好的播放体验。