MediaElement.js Изменить источник видео onclick

В MediaElement.js я пытаюсь создать "мульти" видеопроигрыватель. Более или менее я собираюсь иметь миниатюры, чтобы изменить источник видео на основе того, на который пользователь нажимает.

Я успешно сделал это для источника HTML5, используя

<img src="http://mydomain.com/mysouceimage.jpg" style="width:100px; height:75px;" onclick="document.getElementsByTagName('video')[0].src = '/media/build/BTBW.m4v';" />

<img src="http://mydomain.com/mysouceimage-2.jpg" style="width:100px; height:75px;" onclick="document.getElementsByTagName('video')[0].src = '/media/build/myVideo-2.m4v';" />

НО это работает только для проигрывателя HTML5, а не для Flash. Я использую базовый тег видео и позволяю mediaelement.js выполнять резервную работу. Я думал, что смена источника, подобного приведенному выше примеру, будет работать, но это не так.

Я хочу, чтобы видео остановилось и переключилось на следующий, когда выбрано следующее изображение, и наоборот с резервным проигрывателем Flash.

Есть ли простой способ сделать это. Я не видел слишком много документации о том, как динамически отключать видео с материалом Mediaelement.js.

Приветствуются любые предложения.

ОТВЕТЫ

Ответ 1

Если вы используете плеер с API, вы можете использовать метод setSrc.

Пример:

<script>
var player = new MediaElementPlayer('video', {
    defaultVideoWidth: 960,
    defaultVideoHeight: 410,
    features: ['playpause', 'progress', 'current', 'duration', 'volume', 'fullscreen'], 
    success: function (mediaElement, domObject) {}
});

// ... sometime later

player.setSrc('urlToVid.mov');
player.play();
</script>

Ответ 2

Вы не можете просто изменить источник видеофайла. Вам нужно удалить div mejs, создать новое видео html5, а затем снова вызвать мультимедийный элемент. Повторяя этот процесс, вы должны при необходимости генерировать новый флэш-резерв с каждым видео.

Ответ 3

для меня работал для загрузки медиа-объекта после изменения src.. например:

var player = new MediaElementPlayer('#vid'/*, Options */);        

$('#the_url').on('keypress',function(e){    
    if (e.which == 13) {
        player.pause();
        player.setSrc($('#the_url').val());        
        player.media.load();
    }
});

Ответ 4

Поскольку это заняло у меня много времени, чтобы выяснить, я опубликую то, что я нашел здесь. Я использовал плагин MediaElementJS Wordpress. Чтобы изменить источник, вы можете получить ссылку на проигрыватель мультимедийных элементов следующим образом:

$('#wp_mep_1')[0].player.media

Причина этого заключается в том, что в WordPress плагин не дает вам переменной для вызова функций типа .load() или .play() on. Итак, я, наконец, понял, что именно так вы можете получить ссылку на плеер, вставленный плагином.

Итак, чтобы изменить src:

var player = $('#wp_mep_1')[0].player.media;
if(player.setSrc)
    player.setSrc('xyz.mp4');

Ответ 5

Старый пост - фигура Я бы добавил свое разрешение

Примечание: вызов load() также автоматически воспроизводит видео. Этот код также предполагает, что у вашего ввода уже есть значение, и это дочерний элемент тега привязки, который был нажат.

$('#idThatSwitches').click(function (e) {
    // get youTubeId
    var youTubeId = $(this).find('input[type="hidden"]').val();

    // switch out player video source and reload
    var player = $('#idOfYourPlayer')[0].player.media;
    player.setSrc('http://youtube.com/watch?v=' + youTubeId);
    player.load();
});

Ответ 6

Я тоже приму свою очередь, воскресив старый вопрос.

Я не уверен, что что-то изменилось в плагине MediaElement, но ни одно из вышеперечисленных решений не помогло мне на 100%, некоторые частично работали, а некоторые не работали вообще. Несколько проблем, с которыми я столкнулся, заключались в том, что я мог загружать видео только в элемент, если раньше не было загружено и воспроизводилось предыдущее видео, это было бесполезно для меня, поскольку оно предназначалось для использования в качестве селектора списков воспроизведения. Другая проблема была по какой-то причине, что видео не будет загружаться полностью и просто остановится на несколько секунд.

Ниже, однако, работает для меня с октября 15.

<a href="#" onclick="location.href='http://www.youtube.com/watch?v=VIDEO-ID'; return false;" onclick="
  playerObject.pause();
  playerObject.setSrc(this.href);
  playerObject.media.load();
  playerObject.load();
  return false
">
<img src="yourimg">
</a>

Мне нравится использовать A tage, чтобы помочь мне с форматированием кликабельных объектов, подобных этому, также сохраняет открытые в новых функциях окна/вкладки.