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');

そのままではテストしていません。使用しているコードから編集する必要がありましたが、動作するはずです。