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 对象说明
名称 说明 类型
type 消息类型 string
doc_index 当前PPT图片在文档中的序号 number
docid 当前文档的hash id string
url 当前PPT图片的链接地址 string

results matching ""

    No results matching ""