2012-07-11 57 views
2

我正在使用mediaelement.js播放mp3/mp4/wmv(是的,我們有很多wmv)的頁面上工作。我有一個鏈接列表,這些鏈接應該改變播放器。我的努力是通過javascript對播放器進行更改,以便頁面不刷新。MediaElement.js setSrc()加載文件但不能更改插件類型

此代碼正在工作,但每次都會刷新。 (鏈接刪除)

<?php 
$file = null; 
$file = $_GET["file"]; 
$format = null; 
if (preg_match("/mp4/i", $file)) $format = "mp4"; 
if (preg_match("/webm/i", $file)) $format = "webm"; 
if (preg_match("/wmv/i", $file)) $format = "wmv"; 
if (preg_match("/mp3/i", $file)) $format = "mp3"; 
if (preg_match("/ogg/i", $file)) $format = "ogg"; 
$mime = null; 
if ($format == "mp4") $mime = "video/mp4"; 
if ($format == "webm") $mime = "video/webm"; 
if ($format == "wmv") $mime = "video/wmv"; 
if ($format == "mp3") $mime = "audio/mp3"; 
if ($format == "ogg") $mime = "audio/ogg"; 
$element = "video"; 
if ($format == "mp3" || $format == "ogg") $element = "audio"; 
// you have to escape (\) the escape (\) character (hehehe...) 
$poster = "media\\120701Video.jpg"; 
$height = "360"; 
if ($format == "mp3") $height = "30"; 
?> 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Embed</title> 
<link rel="stylesheet" href="include/johndyer-mediaelement-b090320/build/mediaelementplayer.min.css"> 
<style> 
audio {width:640px; height:30px;} 
video {width:640px; height:360px;} 
</style> 
<script src="include/johndyer-mediaelement-b090320/build/jquery.js"></script> 
<script src="include/johndyer-mediaelement-b090320/build/mediaelement-and-player.js"></script> 
</head> 
<body> 
<ul> 
    <li><a href="embed.php">Reset</a></li> 
    <li><a href="?file=media/120701Video-AnyVideoConverter.mp4">Alternative (mp4)</a></li> 
    <li><a href="?file=media/120701Video-Ffmpeg-Defaults.webm">Alternative (webm)</a></li> 
    <li><a href="?file=media/AreYouHurting-Death.wmv">Alternative (wmv)</a><li> 
    <li><a href="?file=media/AreYouHurting-Death.mp3">Alternative (mp3)</a></li> 
</ul> 
<?php if ($file) { ?> 
<video src="<?php echo $file; ?>" controls poster="<?php echo $poster; ?>" width="640" height="360"></video> 
<div id="type"></div> 
<script> 
var video = document.getElementsByTagName("video")[0]; 
var player = new MediaElementPlayer(video, { 
    success: function(player) { 
     $('#type').html(player.pluginType); 
    } 
}); 
<?php } ?> 
</script> 
</body> 
</html> 

這些代碼需要<video>被加載,首先,用一個文件,以使得播放器模式(pluginType)被設置。那麼,它只會播放預先建立的模式支持的格式(本機模式下的firefox不會播放mp4)。請參閱live demo of the ajax version

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Embed</title> 
<link rel="stylesheet" href="http://www.mediaelementjs.com/js/mejs-2.9.2/mediaelementplayer.min.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="http://www.mediaelementjs.com/js/mejs-2.9.2/mediaelement-and-player.js"></script> 
</head> 
<body> 
<ul> 
    <li><a href="javascript:player.pause(); player.setSrc('media/120701Video-AnyVideoConverter.mp4'); player.load(); player.play();">Alternative (mp4)</a></li> 
    <li><a href="javascript:player.pause(); player.setSrc('media/120701Video-Ffmpeg-Defaults.webm'); player.load(); player.play();">Alternative (webm)</a></li> 
    <li><a href="javascript:player.pause(); player.setSrc('media/AreYouHurting-Death.wmv'); player.load(); player.play();">Alternative (wmv)</a></li> 
    <li><a href="javascript:player.pause(); player.setSrc('media/AreYouHurting-Death.mp3'); player.load(); player.play();">Alternative (mp3)</a></li> 
</ul> 
<video controls src="media/WordProductionCenter.mp4"></video> 
<div id="type"></div> 
<script> 
var video = document.getElementsByTagName("video")[0]; 
var player = new MediaElementPlayer(video, { 
    success: function(player) { 
     $('#type').html(player.pluginType); 
    } 
}); 
</script> 
</body> 
</html> 

看起來我需要的東西像setType(),但我看不到這樣的選項。我已經閱讀了一些引用在javascript運行後刷新DOM的頁面,但是我一直無法成功地做到這一點(我對Java的足夠了解可以破解一些東西並獲取工作內容,但還不足以創建全新的事情)。

值得注意的是,Silverlight不支持Internet Explorer 8或Safari(不知道它是我的代碼,mejs還是瀏覽器)。此外,Silverlight和Flash都不會播放mp3或webm(再次,不確定問題出在哪裏)。

有沒有辦法將不同類型的文件動態加載到mediaelement中?

+0

嗯,我已經放棄了這一點。我似乎無法按照我的期望工作。在其他項目... – doubleJ 2012-10-17 14:56:50

回答

8

您可以使用setSrc更改MediaElement播放器的來源,它也接受一組值。 例如:

player.setSrc([ 
    { src:'newfile.mp4', type:'video/mp4' }, 
    { src:'newfile.webm', type:'video/webm' } 
]); 
+0

我沒有使用.setSrc,但我沒有添加類型。我會看看這是否會改變任何事情。 – doubleJ 2012-10-17 14:17:47

+2

謝謝謝謝謝謝你!!!我正要把我的Mac扔出窗外,一直在尋找這個解決方案好幾個小時。 – NightMICU 2013-07-30 16:57:56

+2

那時我也是! – 2013-07-31 07:24:34

1

對我來說它的工作!

if (video == undefined) 
     video = new MediaElementPlayer('#playerVideo'); 

    video.pause(); 
    video.setSrc($("#linkVideo").val()); 
    video.media.load(); 
    video.play();