3

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 を再生しません)。ajax バージョンのライブ デモをご覧ください。

<!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 にロードする方法はありますか?

4

2 に答える 2

9

setSrc値の配列も受け入れるMediaElement プレーヤーのソースを変更できます。例えば：

player.setSrc([
   { src:'newfile.mp4', type:'video/mp4' },
   { src:'newfile.webm', type:'video/webm' }
]);
于 2012-10-17T10:59:17.943 に答える
1

私にとってはうまくいきます!!

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

    video.pause();
    video.setSrc($("#linkVideo").val());
    video.media.load();
    video.play();
于 2015-09-03T12:40:46.130 に答える