Media Element.js - 更改视频海报图像答案

【问题标题】：Media Element.js - Change video poster imageMedia Element.js - 更改视频海报图像
【发布时间】：2014-01-31 04:46:57
【问题描述】：

我已将 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&amp;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>

谢谢。

【问题讨论】：

标签： jquery mediaelement.js

【解决方案1】：

$('#changeposter').click(function() {
    $('video, audio').each(function() {
        $(this).attr("poster", "../../Images/new_pix.jpg");
    });
});

【讨论】：

【解决方案2】：

更换海报后最好重新加载播放器才能生效。

var player = new MediaElementPlayer('#your-player-element-id');
player.load();
player.play();
player.pause();

【讨论】：