mediaelement.js - 如何使用 youtube 视频更改源和加载媒体播放器？

Question

我正在尝试构建一个播放列表，当第一个视频结束时，我正在更改源并调用调用加载。这在 html5 模式下对我不起作用。有什么建议吗？

Answer 1

youtube pluginApi 的 setSrc 方法不存在或不正确：https ://github.com/johndyer/mediaelement/issues/381

您必须从 pluginApi 中直接调用 loadVideoByUrl() 或 loadVideoById()：

var myVideoPlayer = new MediaElementPlayer('#elementId');
myVideoPlayer.media.pluginApi.loadVideoById('myYoutubeId');

或者创建一个插件来扩展“媒体”索引并添加 setSrc() 来调用这些方法之一：

/* global mejs */

(function($) {
    $.extend(MediaElementPlayer.prototype, {
        buildmyyoutube: function(player, controls, layers, media) {
            if (!player.isVideo || media.pluginType !== 'youtube') {
                return;
            }

            $.extend(media, {
                /**
                 * mejs' youtube plugin's setSrc doesn't support youtube urls (the flash one does)
                 * 
                 * @param string urlOrId Can either be a youtube url http://www.youtube.com/watch?v=<YoutubeId>
                 *                       or directly a youtube id
                 */
                setSrc: function (urlOrId) {
                    var queryStr = urlOrId.match(/v=([^&]*)/);
                    var id = urlOrId;

                    if(queryStr !== null) {
                        id = queryStr[1];
                    }
                    this.pluginApi.loadVideoById(id);
                }
            });
        }
    });
})(mejs.$);

var myVideoPlayer = new MediaElementPlayer('#elementId', {features: ['myyoutube']});
myVideoPlayer.setSrc('myYoutubeId');
myVideoPlayer.setSrc('http://www.youtube.com/watch?v=myYoutubeId');

我没有按原样测试它，我不得不从我使用的一些代码中编辑它，但它应该可以工作。