Mudu.Player 播放器组件(muduPlayer 新版)

升级提示

在 初始化播放器 和使用 player.load() 方法时新增isLive参数(默认为false)
该参数用于控制播放器的ui展示,当为false时 显示进度条 和 时间进度 ;当为true时 隐藏进度信息 并 显示为直播状态

初始化播放器

var isChannelLiving = !!Mudu.Room.GetLiveStatus() // Mudu.Room.GetLiveStatus() 获取当前的直播状态 类型为number: `1`为正在直播，`0`为不在直播 

var player = new Mudu.Player(
  {
    // 必须，播放器容器ID，播放器会被添加到该DOM元素中
    containerId: 'J_prismPlayer',

    // 必需， boolean 控制播放器的ui展示, 默认为false; 根据播放视频的实际情况填写
    isLive: isChannelLiving,

    // 非必需，isLive为false时，传入video_id，将自动匹配视频的封面和打点（进度条高亮）配置
    video_id: Mudu.Room.GetTrailer().video_id,

    // 播放器视频播放地址（传入video_id时，优先播放video_id对应的视频，src可不传，无video_id则必须传入src）
    src: Mudu.Room.GetPlayAddr(),

    // 非必须，播放器海报图 string
    image: Mudu.Room.GetLiveImage(),

    // 非必须，播放器是否自动播放，默认false
    autoplay: false,

    // 非必须，播放器是否显示控制条，默认true
    controls: true,

    // 非必须，播放器是否循环播放, 默认false
    repeat: false,

    // 非必须，播放器宽度，单位为像素，默认为480
    width: 640,

    // 非必须，播放器高度，单位为像素，默认为270
    height: 360,

    // 以下x5Layer和x5Inline两个参数用于解决安卓微信、QQ、QQ浏览器的只能全屏播放的问题。参数仅对安装过tbs(腾讯浏览服务，一般安装过QQ浏览器后手机上会存在)手机生效(由于tbs的api限制，部分低版本的微信、QQ、QQ浏览器可能不会生效)，未安装tbs的安卓手机不会有只能全屏播放的问题。
    // x5Layer和x5Inline只能有一个被设置为true

    // 非必须，播放器在安卓微信、QQ、QQ浏览器中是否同层播放, 默认false  （注：同层播放时，页面document无法滚动(内部的dom元素可以)，如果播放器宽度小于浏览器宽度，两边将出现黑边）
    x5Layer: false,

    // 非必须，播放器在安卓微信、QQ、QQ浏览器中是否inline播放，默认false  （注：inline播放时，播放器始终处于z-index的最上层，因此无法在播放器上叠加元素）
    x5Inline: false,

    // 非必须 isLive为false时展示在时间进度条上的高亮点，hover时可展示text字段内容 （有video_id时自动匹配视频打点信息，若传入此字段可覆盖视频默认配置）
    highlights: [{
      time: 1, // int,
      text: '大会开始' // string
    }],

    // 非必须，播放器error状态渲染方法：(param: {message}) => string | HTMLElement ，默认值 null (渲染方法为null时，播放器会渲染内置报错提示)
    renderError: () => ' ',

    // 非必须，在播放频道直播流时是否自动重试，默认值为false
    // （注：初始化传入后不可更改，直播间处于直播中状态，且播放器当前加载内容为直播流<即加载配置中 isLive 为 true> 时，播放器error会触发重试）
    retryWhenLiveError: false,
  }
);

注意：以下对播放器的操作(开始、暂停、设置、获取状态等操作)需要在Player.Ready事件发生之后进行

开始播放

player.play()

暂停播放

player.pause()

停止播放

player.stop()

设置控制条是否显示

player.setControls(
    // true设置显示, false设置不显示
    true
)

设置播放器尺寸

player.setPlayerSize(
  // 宽度，单位为像素
  640,

  // 高度，单位为像素
  360
)

获取播放器状态

var state = player.getState()

返回string类型：idle表示播放器空闲(未开始播放), buffering表示播放器正在缓冲, playing表示播放器正在播放, paused表示播放器处于暂停播放状态。

加载新的播放地址

player.load([
    {
        // isLive 必需 boolean 控制播放器的ui展示,默认为false; 根据播放视频的实际情况填写
        isLive: false,
        // 非必需，isLive为false时，传入video_id，将自动匹配视频的封面和打点（进度条高亮）配置
        video_id: 'my_video_id',
        // 播放器视频播放地址（传入video_id时，优先播放video_id对应的视频，file可不传，无video_id则必须传入file）
        file: 'https://my.video.address.m3u8',
        // 非必需，视频封面：有video_id时将自动匹配video对应封面，若传入此字段可覆盖视频默认配置
        image: 'https://my.video.cover.png',
        // 非必需，isLive为false时展示在时间进度条上的高亮点，hover时可展示text字段内容 （有video_id时自动匹配视频打点信息，若传入此字段可覆盖视频默认配置）
        highlights: [{
          time: 9, // int
          text: '大会开始' // string
        }]
    }
])

Player.Ready事件

Player.Ready事件会在播放器初始化完成被触发

Mudu.MsgBus.On(
  // 事件名，值为Player.Ready
  'Player.Ready',

  // 事件处理函数，参数为当前player组件对象
  function (player) {
    console.log('Mudu Player 播放器初始化完成')
  }
)

Player.Play事件

Player.Play事件会在播放器开始播放时被触发

Mudu.MsgBus.On(
  // 事件名，值为Player.Play
  'Player.Play', 

  // 事件处理函数，参数为当前player组件对象
  function (player) {
    console.log('Mudu Player 播放开始')
  }
)

Player.Stoped事件

Player.Stoped事件会在播放器停止播放时被触发

Mudu.MsgBus.On(
  // 事件名，值为Player.Play
  "Player.Stoped",

  // 事件处理函数，参数为当前player组件对象
  function (player) {
    console.log('Mudu Player 停止播放')
  }
)

Player.Waiting事件

Player.Waiting事件会在播放器缓冲时被触发

Mudu.MsgBus.On(
  // 事件名，值为Player.Waiting
  "Player.Waiting",

  // 事件处理函数，参数为当前player组件对象
  function (player) {
    console.log('Mudu Player 缓冲中')
  }
)

Player + PPT 同步

仅部分m3u8的直播流支持，请根据下述判断来使用
初始的PPT状态，请使用PPT组件中的API来获取

var player = new Mudu.Player({ ... }); // 请自行设置参数
var wsPPTListener; // websocket ppt相关消息的监听器, 全局唯一
player.off('myunSyncAvailable', handlePPTAvailableChange); // 销毁监听器，防止重复监听
player.on('myunSyncAvailable', handlePPTAvailableChange);

listenWsPPTChange();

function handlePPTAvailableChange(data){
  var available = data.available;
  console.log('当前流是否支持 流+ppt 同步，type：boolean ，', available);
  if (available) {
    player.off('myunSyncMessage', dealWithPPTChanged);
    player.on('myunSyncMessage', dealWithPPTChanged);
    clearListenWsPPTChange();
  } else {
    player.off('myunSyncMessage', dealWithPPTChanged);  // 销毁监听器，防止重复监听
    // 可以根据业务自行选择是否对接PPT组件的API，可在左侧列表中找到链接地址
    // 注意销毁，防止重复监听或执行
    listenWsPPTChange();
  }
}

function dealWithPPTChanged(data) {
  var info;
  try {
    info = JSON.parse(data.message);
  } catch(e) {
    console.warn('something error :', e);
    return;
  }

  if (
    !info 
    || info.type !== 'doc' // 非PPT文档类型的messgae忽略掉
    || info.docid === '0' // websdk暂不支持白板
    || info.docid === '-1' // 停用当前使用的文档，此时info.url为空字符串
    || !info.url // PPT图片的链接地址为空
  ) { return }

  console.log('最新的PPT图片信息：', info); // 结构见底部
}

function listenWsPPTChange() {
  clearListenWsPPTChange();
  wsPPTListener = Mudu.MsgBus.On('PPT.Changed', function(response) {
    response = JSON.parse(response);
    console.log('最新的PPT图片信息2：', response); // 数据结构见PPT组件
  });
}

function clearListenWsPPTChange() {
  if (wsPPTListener) {
    Mudu.MsgBus.UnSub(wsPPTListener);
    wsPPTListener = null;
  }
}

• info 对象说明