默认接收器上的Chromecast WebVTT字幕

时间:2018-11-27 22:12:55

标签: javascript google-chrome chromecast subtitle webvtt

因此,我尝试使用默认的chrome发送器应用为chromecast设置隐藏式字幕,根据文档,as seen here应该是可能的。 我不知道为什么我的代码不起作用。它几乎与提供的示例代码相同。
狙击手可能因为沙箱太小而无法使用,请在常规html页面中查看: Click!
首先,应该使用顶部按钮连接他们的chromecast,然后单击“加载视频”。

我的代码:

var suburl = 'https://cors-anywhere.herokuapp.com/brenopolanski.com/html5-video-webvtt-example/MIB2-subtitles-pt-BR.vtt';
var mediaurl = 'https://cors-anywhere.herokuapp.com/www.w3schools.com/html/mov_bbb.mp4';
var mediaInfo;
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId:
      chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
  });
  var englishSubtitle = new chrome.cast.media.Track(1, // track ID
  chrome.cast.media.TrackType.TEXT);
  englishSubtitle.trackContentId = suburl;
  englishSubtitle.trackContentType = 'text/vtt';
  englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
  englishSubtitle.name = 'English Subtitles';
  englishSubtitle.language = 'en-US';
  englishSubtitle.customData = null;

  mediaInfo = new chrome.cast.media.MediaInfo(mediaurl);
  var textTrackStyle = new chrome.cast.media.TextTrackStyle();
  textTrackStyle.foregroundColor = '#80FF0000';

  mediaInfo.contentType = 'video/mp4';
  mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
  mediaInfo.customData = null;
  mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
  mediaInfo.textTrackStyle = textTrackStyle
  mediaInfo.duration = null;
  mediaInfo.tracks = [englishSubtitle];
  mediaInfo.activeTrackIds = [1];
};

function loadVideo() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  var request = new chrome.cast.media.LoadRequest(mediaInfo);
  castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });
}
.cast-button, .load-button {
  max-width: 50px;
  max-height: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>Sample chromcast</title>
</head>
<body>
<div class="cast-button">
  <google-cast-launcher></google-cast-launcher>
</div>
<button class="load-button" onclick="loadVideo()"> Load video </button>

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

经过大量搜索后,我仍然无法查明确切的问题。但是,我偶然发现了支持字幕的ChromeCast SDK的惊人包装器:https://github.com/Fenny/ChromecastJS/

包括此演示:https://fenny.github.io/ChromecastJS/demo/index.html

希望这可以帮助其他人!