将文件投射到Chromecast时，无法在视频播放器中播放

Question

我正在尝试使用Castjs将Chromecast功能添加到VideoJS播放器（7.5.5）。我终于有了一些基本功能（播放/暂停/音量/搜索），但是我似乎对如何在投射文件时暂停视频播放器本身的播放不屑一顾。

可以在here中找到工作示例（我无法在此处粘贴”。）在javascript部分下方。

//chromecast
var cc = new Castjs();
//vjsplayer
var vjsplayer = videojs("my-video");

//on chromecast button click
$(document).on("click", ".vjs-chromecast-button", () => {
  if (cc.available && !cc.session) {
    var vd = $("#my-video");
    cc.cast(vd.find("Source:first").attr("src"), {
      poster: vd.attr("data-poster"),
      title: vd.attr("data-title"),
      time: vjsplayer.currentTime(),
      muted: false,
      paused: false
    });
  } else {
    cc.disconnect();
    $(".cc-remote").hide(200);
    $(".cc-state")
      .find("use")
      .attr("xlink:href", "#cc-inactive");
  }
});

cc.on("available", () => {
  $(
    '<div class="vjs-chromecast-selector vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"><button class="vjs-menu-button vjs-menu-button-popup vjs-chromecast-button vjs-button" type="button" aria-disabled="false" aria-haspopup="true" aria-expanded="false" title="Chromecast"><span aria-hidden="true" class="vjs-icon-placeholder"><a class="cc-state"><svg class="icon" viewBox="0 0 36 36"><use id="target" xlink:href="#cc-inactive"></use></svg></a></span></button></div>'
  ).insertAfter(
    $(".vjs-control-bar")
      .children()
      .last()
  );
});

cc.on("session", () => {
  $(".cc-remote").show(200);
  $(".cc-state")
    .find("use")
    .attr("xlink:href", "#cc-active");
  $(".cc-remote-display-status-text").text("Casting to " + cc.device);
});

//
vjsplayer.on("pause", () => {
  if (cc.session) cc.pause();
});

vjsplayer.on("play", () => {
  if (cc.session) cc.play();
});

vjsplayer.on("seeking", () => {
  if (cc.session) cc.seek(vjsplayer.currentTime());
});

vjsplayer.on("volumechange", () => {
  if (cc.session) {
    if (vjsplayer.muted()) {
      cc.volume(0);
    } else {
      cc.volume(vjsplayer.volume());
    }
  }
});

我只有一个主意，但似乎有点过头：开始投射时，暂停视频播放器，禁用初始控制栏，然后覆盖另一种用于投射视频的控制栏。当然，当与chromecast断开连接时，请移除覆盖控制栏，再次启用初始控制栏，等等。

虽然我可能可以完成这项工作，但我觉得应该有一个（更好的）解决此问题的方法。

Answer 1

您可以创建一个“ tech”，这是Video.js在正在播放视频和播放器之间架起桥梁的方式。播放视频的内容通常是视频元素，但可以是Flash或无边框的You Tube播放器。 Chromecast的技术会将播放/暂停等请求转发到投射会话，并根据投射会话更新播放器的进度条。这就是其他Chromecast implementations for Video.js的工作方式。