我已将MediaElement.js视频播放器集成到我的MVC 4应用程序中。在该视图中,我有一个按钮,在按钮单击中我想要更改视频源和海报图像。我发现在mediaelementjs.com提供的代码中点击按钮时更改视频源的属性。但它不包含任何改变海报图像的属性。是否可以像视频源一样更改海报图片?
这是我的代码:
<div class="videoplayer">
<video width="436" height="331" id="player2" poster="../../Images/pix.jpg" controls="controls" preload="none">
<!-- MP4 source must come first for iOS -->
<source type="video/mp4" src="http://127.0.0.1:10000/devstoreaccount1/videos/video2.mp4" />
<!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
<object width="436" height="331" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">
<param name="movie" value="../build/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=http://127.0.0.1:10000/devstoreaccount1/videos/video2.mp4" />
<!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
<img src="../../Images/pix.jpg" width="436" height="331" alt="No video playback capabilities"
title="No video playback capabilities" />
</object>
</video>
</div>
<script>
$('audio,video').mediaelementplayer({
success: function (player, node) {
debugger;
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
}
});
</script>
<input type="button" id="changevideo" value="Change Video" />
<script type="text/javascript">
$('#changevideo').click(function () {
$('video, audio').each(function () {
$(this)[0].player.setSrc("http://127.0.0.1:10000/devstoreaccount1/videos/video1.mp4");
$(this)[0].player.play();
});
});
</script>
感谢。
答案 0 :(得分:1)
$('#changeposter').click(function() {
$('video, audio').each(function() {
$(this).attr("poster", "../../Images/new_pix.jpg");
});
});
答案 1 :(得分:0)
最好在更改海报后重新加载播放器才能生效。
var player = new MediaElementPlayer('#your-player-element-id');
player.load();
player.play();
player.pause();