2
mediaelement.js을 사용하여 mp3/mp4/wmv를 재생하는 페이지에서 작업하고 있습니다 (예, 우리는 wmv가 많습니다). 링크 목록이있어 링크가 플레이어를 변경해야합니다. 내 노력은 페이지를 새로 고치지 않도록 자바 스크립트를 통해 플레이어를 변경하는 것입니다.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>
이 코드는 플레이어 모드 (pluginType)이 설정되도록 <video>가 처음과 파일을로드 할 것을 요구 (링크 제거). 그러면 사전 설정된 모드가 지원하는 형식 만 재생됩니다 (기본 모드의 firefox는 mp4를 재생하지 않습니다). live demo of the ajax version을 참조하십시오. 내가 setType() 같은 뭔가가 필요 같은
<!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>
이 보인다,하지만 난 그런 옵션이 표시되지 않습니다. 나는 JavaScript를 실행 한 후 DOM을 새로 고치는 참조 된 몇 페이지를 읽었지만, 성공적으로 할 수 없었습니다. (자바 스크립트를 충분히 해킹하여 물건을 작동시키고 완전히 새로운 것을 만들 수는 없습니다. 소지품).
Silverlight는 Internet Explorer 8 또는 Safari (내 코드, mejs 또는 브라우저인지 확실하지 않음)에서 작동하지 않습니다. 또한 Silverlight와 Flash는 mp3 또는 webm을 재생하지 않습니다 (다시 말하지만 문제가있는 곳은 확실하지 않음).
다른 유형의 파일을 미디어 요소에 동적으로로드하는 방법이 있습니까?
글쎄, 나는 이것을 포기했다. 나는 그것이 내가 기대했던대로 작동하도록 할 수 없다. 다른 프로젝트에서 ... – doubleJ