MediaElement.js更改視頻的來源onclick

在MediaElement.js中，我試圖製作一個「多」視頻播放器。或多或少，我將根據用戶點擊的內容，使用縮略圖更改視頻的來源。MediaElement.js更改視頻的來源onclick

我已經成功地做到了使用

<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的來源，但這隻適用於HTML5播放器作品和不是Flash回落。我正在使用基本視頻標記，並讓mediaelement.js執行備用工作。我認爲像上面的例子那樣改變源代碼可以工作，但它不會。

我希望視頻停止，並在下一張圖像被選中時切換到下一張圖像，反之亦然，並帶有Flash播放器後備。

有沒有一種簡單的方法來做到這一點。我還沒有看到有關如何使用Mediaelement.js動態地切換視頻的文檔太多。

任何建議將不勝感激。

來源

2011-04-14 ClosDesign

你不能只是改變視頻文件的來源。您必須刪除mejs div，創建一個新的html5視頻，然後再次調用mediaelement。通過重複此過程，您可以根據需要爲每個視頻生成一個新的閃回回退。

來源

2011-05-06 01:59:02 Matrym

哇。希望這更明顯。這對我有效。 – program247365 2012-04-30 14:39:12

如果您使用帶有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>

來源

2011-06-02 22:07:25

謝謝，夥計。這真的幫了我。幾乎認爲放棄這個很酷的球員！ – Marcel 2012-11-09 20:15:54

它的工作對我來說，加載媒體對象的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(); 
    } 
});

來源

2014-03-02 21:03:42 bjorgvin

由於這已經採取了大量的時間對我來說弄清楚，我會發布我在這裏找到的。我使用了MediaElementJS Wordpress插件。要更改信號源，就可以得到這樣的媒體元素播放器的引用：

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

之所以這樣做，這是因爲在WordPress插件不會給你一個變量調用的功能，如或.play()。所以，我終於明白，你是如何得到插件插入的播放器的參考的。

因此改變源：

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

來源

2014-06-23 14:17:05

舊後 - 想我會加入自己的決定

注：調用load()也將自動播放視頻。此代碼還假定您的輸入中已有一個值，並且它是單擊的錨標記的子項。

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

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

來源

2015-05-05 17:23:29

我也輪到復活老問題了。

我不知道，如果事情在MediaElement的插件已經改變，但沒有上述方案的工作對我來說100％，一些工作部分和一些沒有在所有的工作。我遇到的一些問題是，如果以前沒有載入和播放過的視頻，我只能將視頻加載到某個元素中，這對我來說並不好，因爲它本意是用作播放列表選擇器。另一個問題是無論什麼原因，視頻將不會加載一路只停留在幾秒鐘。

以下但爲我工作作爲十月'15的。

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

我喜歡用A tage來幫助我這樣格式化可點擊的對象，也保留了在新窗口/選項卡函數中打開。

來源

2015-10-06 14:20:42 Wobbles

MediaElement.js更改視頻的來源onclick

回答

相關問題