七牛云网页播放器示例

Author Avatar
LittleBlack 5月 02, 2019
  • 在其它设备中阅读本文章

原文链接

https://developer.qiniu.com/pili/sdk/4621/web-player-sdk

引入

qplayer-web-player.js 直接引入您的站点即可, 下载地址:https://sdk-release.qnsdk.com/qiniu-web-player-1.1.0.js

创建一个播放器

只要指定资源的播放地址和页面上的一个元素,SDK 就会自动在这个元素下面创建相应的播放器组件,目前支持的资源格式是 mp4、webm 和 m3u8。

const player = new QPlayer({
  url: "http://xxx.xxxx.xxx.m3u8",
  container: document.getElementById("xxx"),
});

构造参数配置

QPlayerConfig {
  url: string; // 视频源,目前支持 mp4、webm 和 m3u8
  container: HTMLElement | HTMLVideoElement; // 一个 HTML 元素作为播放器的容器,播放器默认使用容器的宽高,也支持直接传入 video 元素
  autoplay?: boolean; // 是否自动播放
  muted?: boolean; // 是否静音
  poster?: string; // 封面图片
  hls?: {
    DRMKey?: Uint8Array; // 七牛 HLS DRM 加密密钥
        isG711?: boolean; // 是否是 G.711 编码的音频
  };
  isLive?: boolean; // 是否是直播流, 这个开启后播放器将不会渲染进度条和时间
  loggerLevel?: number; // log 等级,0 info,1 debug, 2 只看错误,3 关闭 log,默认为 1
}

实例

<script type="text/javascript" src="/js/qiniu-web-player-1.0.0.js">
  var container = document.getElementById("player");
  const player = new QPlayer({
    url: "http://demo-videos.qnsdk.com/movies/qiniu.mp4",
    container: container,
    autoplay: true,
  });
</script>