智能创作
有奖捉虫：行业应用 & 管理与支持文档专题 HOT
文档中心 > 智能创作 > 开发文档 > 开发指南 > 播放器与合成协议 > 播放器

播放器

最近更新时间：2023-11-15 20:48:01

我的收藏

本页目录：

介绍

Web Iframe 接入可以不用关心播放器细节，如果业务需要自行实现剪辑交互，可以使用我们的播放器进行轨道数据播放。
window.YJPlayer 是用于预览 视频合成协议数据 的 Web 播放器构造函数。
window.YJPlayer.Helper 提供辅助函数协助组装 合成协议数据。

快速开始

<html>
  <head>
    <!--cdn形式引入我们的sdk--->

    <!-- window.YJPlayer -->
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    /**
     *    @auth 登录方法，保证可以调用CME，WebAPI。
     *    @param sign {{string}} 签名串，请参见 生成客户端访问签名（Signature） https://cloud.tencent.com/document/product/1156/50898。
     *    注意：这里只能使用 action = Login 的签名串
     **/

    YJPlayer.Helper.CMEUtils.auth({
      sign: "your_sign",
    })
      .then(() => {
        console.log("登录成功");
        /**
         * 创建一个轨道数据
         */
        const videoTrack = YJPlayer.Helper.Track.create({
          type: "video",
        });

        console.log(videoTrack);

        /***
         * 从媒资库获取一个视频类型素材。
         * 使用append助手方法往轨道添加元素。
         */
        YJPlayer.Helper.CMEUtils.createTrackItem(["video_asset_id"]).then(
          (videoItem) => {
            YJPlayer.Helper.Track.append(videoTrack, videoItem);

            videoItem.duration = 8000; //调整播放时长为8秒
            const data = [videoTrack];
            let player = new YJPlayer({
              mode: "preview",
              container: document.getElementById("container"),
              aspectRatio: "16:9",
              data: { tracks: data },
            });
            player.play();
          }
        );
      })
      .catch((err) => {
        console.error("登录异常");
      });
  </script>
</html>

播放器

构造函数

参数
描述
类型
是否必填
mode
播放器模式
edit | preview
是
aspectRatio
播放器舞台纵横比
默认值：16:9 | 9:16，对应的分辨率为 960 * 540 以及 540 * 960
是
container
yj-player实例所挂载的dom容器
HTMLElement
是
data
剪辑协议数据
{ tracks: [] }
否
const player = new YJPlayer({
  mode: "preiew",
  container: document.getElementById("container"),
  aspectRatio: "16:9",
  data: { tracks: [] },
});

属性

所有的都是只读属性。
参数
描述
类型
width
播放器舞台区域宽度
number
height
播放器舞台区域高度
number
ended
播放器播放结束态标志
boolean
aspectRatio
播放器舞台纵横比
16:9 | 9:16
currentTime
当前播放画面帧的时间戳，单位为毫秒
number
totalTime
可播放画面帧的总时长，单位为毫秒
number

方法

方法名
参数
说明
play
无
播放器启动。
setResolution
无
设置播放器舞台比例
pause
无
播放器暂停
seek
(frame: number)
播放器跳到指定帧
stop
无
播放器结束，并 seek 到最后一帧
toStart
无
播放器跳到片头
toEnd
无
播放器跳到片尾
forward
(seconds: number)
视频快进指定秒数
backward
(seconds: number)
视频后退指定秒数
clear
无
重置播放器数据
updateData
(fustionData: { tracks: [] })
更新轨道协议数据，详见轨道协议部分
/**
* 初次自行设置比例和舞台像素，使用时，传入指定比例
* 注意，后台导出的舞台预览仅支持以下比例尺寸.
*{
  '16:9': {
    width: 960,
    height: 540,
  },
  '9:16': {
    width: 540,
    height: 960,
  },
  '1:1': {
    width: 540,
    height: 540,
  },
  '2:1': {
    width: 1080,
    height: 540,
  },
  '6:7': {
    width: 540,
    height: 630,
  },
  '7:6': {
    width: 630,
    height: 540,
  },
  '3:4': {
    width: 540,
    height: 720,
  },
  '4:3': {
    width: 720,
    height: 540,
  },
}
*
*/

YJPlayer.setResolution("16:9", {
  width: 960,
  height: 540,
});
const player = new YJPlayer({
  aspectRatio: "16:9",
});

事件

事件名
参数
说明
stateChange
(state: playing | pause )
播放器状态改变的事件回调
timeUpdate
(frame: number)
播放器时间更新的事件回调
player:playing
无
播放器开始播放时的事件回调
player:pause
无
播放器暂停播放时的事件回调
player:ended
无
播放器播放结束时的事件回调
player:error
无
播放器加载失败时的事件回调
// 所有事件可直接通过应用实例本身进行监听
// 播放状态切换
player.on("stateChange", (res) => {
  // do something...
});

中国站