【发布时间】：2012-07-11 21:52:18
【问题描述】：
我正在开发一个使用mediaelement.js 播放 mp3/mp4/wmv 的页面（是的，我们有很多 wmv）。我有一个链接列表，这些链接应该会改变播放器。我的努力是通过 javascript 对播放器进行更改，以便页面不会刷新。
此代码有效，但每次都会刷新。 （链接已删除）
<?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，但我无法成功地做到这一点（我对 javascript 的了解足够多，可以破解并让东西正常工作，但不足以创建全新的东西）。
值得注意的是，Silverlight 不适用于 Internet Explorer 8 或 Safari（不确定是我的代码、mejs 还是浏览器）。此外，Silverlight 和 Flash 都不能播放 mp3 或 webm（同样，不确定问题出在哪里）。
有没有办法将不同类型的文件动态加载到 mediaelement 中？
【问题讨论】：
-
好吧，我已经放弃了。我似乎无法让它按我期望的方式工作。到其他项目...
标签： javascript html5-video mediaelement.js