默认接收器上的 Chromecast WebVTT 字幕
Chromecast WebVTT captions on a default receiver
所以我正在尝试使用默认的 chrome 发件人应用程序为 chromecast 设置隐藏式字幕,根据文档,这应该是可能的,as seen here。
我不明白为什么我的代码不起作用。它与提供的示例代码几乎相同。
snipper 可能无法工作,因为它太沙盒化了,请在此处的正常 html 页面中查看:
Click!
首先应使用顶部按钮连接他们的 chromecast,然后单击 "load video"。
我的代码:
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>
经过大量搜索,我仍然无法确定确切的问题。然而,我偶然发现了这个支持字幕的 ChromeCast SDK 的惊人包装器:https://github.com/Fenny/ChromecastJS/
包括这个演示:https://fenny.github.io/ChromecastJS/demo/index.html
希望这可以帮助到其他人!
所以我正在尝试使用默认的 chrome 发件人应用程序为 chromecast 设置隐藏式字幕,根据文档,这应该是可能的,as seen here。
我不明白为什么我的代码不起作用。它与提供的示例代码几乎相同。
snipper 可能无法工作,因为它太沙盒化了,请在此处的正常 html 页面中查看:
Click!
首先应使用顶部按钮连接他们的 chromecast,然后单击 "load video"。
我的代码:
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>
经过大量搜索,我仍然无法确定确切的问题。然而,我偶然发现了这个支持字幕的 ChromeCast SDK 的惊人包装器:https://github.com/Fenny/ChromecastJS/
包括这个演示:https://fenny.github.io/ChromecastJS/demo/index.html
希望这可以帮助到其他人!