Video.js播放器添加chromecast按钮？

Question

我已经尝试了许多方法来添加一个铸造按钮到video.js播放器，但无法做到这一点我的生活。有人能帮上忙吗？

我正在使用视频的hellovideo cms，需要添加插件，但对jquery等一无所知。有没有人能帮上忙？

Answer 1

有一个非常好的插件：https://github.com/kim-company/videojs-chromecast

只需按照设置说明操作(将js和css添加到您的页面)。

Answer 2

我试过kim-company/videojs-chromecast了。它只适用于旧版本的videojs，我用的是5.4.6。这是相当多的buggy。我尝试过的另一个工具是benjipott/video.js-chromecast，它声称可以处理较新的videojs，但我一点也不喜欢它。所以我放弃了videojs，我总是发现原生的HTML5视频播放器更可靠，更容易使用(不管怎样，videojs只是包装了这些)。对于chromecast的内容，我提供了一个附近的链接到chromecast.link的按钮，在那里我编写了一个完整的web chromecast发送器应用程序。根据以下示例，在片段中传递视频和海报URL：https://chromecast.link/#content=http://host/some.mp4,poster=http://host/poster.jpg,subtitles=http://host/webvtt.srt

Answer 3

我最近回答了这个问题，您可以在这里查看： more information

​

var session = null;

$( document ).ready(function(){
        var loadCastInterval = setInterval(function(){
                if (chrome.cast.isAvailable) {
                        console.log('Cast has loaded.');
                        clearInterval(loadCastInterval);
                        initializeCastApi();
                } else {
                        console.log('Unavailable');
                }
        }, 1000);
});

function initializeCastApi() {
        var applicationID = chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID;
        var sessionRequest = new chrome.cast.SessionRequest(applicationID);
        var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
                sessionListener,
                receiverListener);
        chrome.cast.initialize(apiConfig, onInitSuccess, onInitError);
};

function sessionListener(e) {
        session = e;
        console.log('New session');
        if (session.media.length != 0) {
                console.log('Found ' + session.media.length + ' sessions.');
        }
}
 
function receiverListener(e) {
        if( e === 'available' ) {
                console.log("Chromecast was found on the network.");
        }
        else {
                console.log("There are no Chromecasts available.");
        }
}

function onInitSuccess() {
        console.log("Initialization succeeded");
}

function onInitError() {
        console.log("Initialization failed");
}

$('#castme').click(function(){
        launchApp();
});

function launchApp() {
        console.log("Launching the Chromecast App...");
        chrome.cast.requestSession(onRequestSessionSuccess, onLaunchError);
}

function onRequestSessionSuccess(e) {
        console.log("Successfully created session: " + e.sessionId);
        session = e;
}

function onLaunchError() {
        console.log("Error connecting to the Chromecast.");
}

function onRequestSessionSuccess(e) {
        console.log("Successfully created session: " + e.sessionId);
        session = e;
        loadMedia();
}

function loadMedia() {
        if (!session) {
                console.log("No session.");
                return;
        }
        
        var videoSrc = document.getElementById("myVideo").src;
        var mediaInfo = new chrome.cast.media.MediaInfo(videoSrc);
        mediaInfo.contentType = 'video/mp4';
  
        var request = new chrome.cast.media.LoadRequest(mediaInfo);
        request.autoplay = true;

        session.loadMedia(request, onLoadSuccess, onLoadError);
}

function onLoadSuccess() {
        console.log('Successfully loaded video.');
}

function onLoadError() {
        console.log('Failed to load video.');
}

$('#stop').click(function(){
        stopApp();
});

function stopApp() {
        session.stop(onStopAppSuccess, onStopAppError);
}

function onStopAppSuccess() {
        console.log('Successfully stopped app.');
}

function onStopAppError() {
        console.log('Error stopping app.');
}

​