MediaElement.js setSrc() 加载文件但不更改插件类型
MediaElement.js setSrc() Loading The File But Not Changing pluginType
我正在开发一个使用 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 中?
您可以使用setSrc
更改MediaElement播放器的源,该播放器也接受一个值数组。例如:
player.setSrc([
{ src:'newfile.mp4', type:'video/mp4' },
{ src:'newfile.webm', type:'video/webm' }
]);
对我来说它
有效!!
if (video == undefined)
video = new MediaElementPlayer('#playerVideo');
video.pause();
video.setSrc($("#linkVideo").val());
video.media.load();
video.play();
相关文章:
- Ionic V2和Cordova插件-未捕获类型错误:无法设置属性'测试'为null
- MediaElement.js setSrc() 加载文件但不更改插件类型
- 带有Highcharts插件的极坐标类型图表
- ng-cordova sqlite 插件:类型错误:无法读取 null 的属性“事务”
- 火狐插件 - 无法触发任何类型的点击事件
- jQuery 图层选择器类型插件或可自定义的列表视图插件
- Krajee 引导程序文件上传插件仅接受图像文件类型
- 将 JavaScript 添加到 Freeboard 小部件插件时出现类型错误
- 如何使用jQuery验证插件根据输入类型=文本/单选/复选框验证表单
- 传单绘图插件:如何按图层类型动态隐藏/显示绘图工具
- 这种类型的 img 链接是否有插件
- 下划线模板的 Requirejs 文本插件内容类型
- 获取类型错误:e 未定义与 js 插件日期时间选择器
- 为JQuery插件确定类型
- 使用jquery文件上传插件的拖放选项限制上传文件的文件类型和总大小
- 如何使用jQuery插件验证不同类型的输入/字段
- jQuery imgelens插件-未捕获类型错误:Object[Object Object]没有方法'imag
- jspm+karma+karma jspm+插件类型脚本
- jstree不兼容的复选框和类型插件
- blueimp 文件上传插件中的 max文件大小和接受文件类型不起作用.为什么