Question

我需要覆盖mediaelements.js组件的“features”属性。场景是这样的： - 以小控制开始第一个宣传视频（仅限音量） - 视频结束时，内容视频开始播放，必须显示更多控制权。

这段代码：

<video width="640" height="360" src="promo.mp4" type="video/mp4"  
id="player1" poster="../media/echo-hereweare.jpg" 
controls="controls" preload="true"></video>

<script>

$(function () {
   promoVideo();
});

function promoVideo() {

 $("#player1").mediaelementplayer({

    features: ['volume'],       
    success: function(player, node) {

        // add event listener
        player.addEventListener('ended', function(e) {
            contentVideo(e.target);         

        }, false);
    }
 });
}   

function contentVideo(player) {

 var contentVideoSrc = "content.mp4";

 player.features = ['playpause','progress','fullscreen','current','duration'];

 player.pause();
 player.setSrc(contentVideoSrc);
 player.play();     
}       

</script>

使用此代码，促销视频启动并且仅具有音量控制。结束时，正确启动内容视频，但不显示“功能”属性中设置的其他控件。我还要以这种方式添加功能：

$("#player1").mediaelementplayer({              
    features: ['playpause','progress','fullscreen','current','duration']
});

和此：

var player = new MediaElementPlayer(
    "#player1"
    ,
    {           
        features: ['playpause','progress','fullscreen','current','duration']            
    }
);

但是在所有情况下都不行。有什么建议吗？

谢谢！朱塞佩

Answer 1

一个快速解决方案就是：

您的网页上有2个视频。第一个立即播放促销视频。后者是隐藏的，当前者结束播放时将播放内容视频。当促销视频结束播放时，您创建另一个与第二个视频相关的媒体元素，您销毁第一个媒体元素并最终显示第二个视频播放。

<video width="640" height="360" src="promo.mp4" type="video/mp4"  
id="player1" poster="../media/echo-hereweare.jpg" 
controls="controls" preload="true"></video>

<video style="display: none;" width="640" height="360" src="content.mp4" type="video/mp4" id="player2" controls="controls" preload="true"></video>

<script>

$(function () {
   promoVideo();
});

function promoVideo() {

$("#player1").mediaelementplayer({

    features: ['volume'],       
    success: function(player, node) {

        // add event listener
        player.addEventListener('ended', function() {
            contentVideo();         

        }, false);
    }
 });
}    

function contentVideo() {

$("#player2").mediaelementplayer({
features : ['playpause','progress','fullscreen','current','duration'],
    success: function(player, node) { player.play(); }
});

mejs.players[0].remove(); 
$('#video:eq(1)').show();

}  

</script>

Answer 2

 $(function(){
                    $('#audio-player').mediaelementplayer({
                        alwaysShowControls: true,
                        features: ['playpause','progress','volume'],
                        audioVolume: 'horizontal',
                        audioWidth: width,
                        audioHeight: 70,
                        iPadUseNativeControls: true,
                        iPhoneUseNativeControls: true,
                        AndroidUseNativeControls: true
                    });
                });

Mediaelements.js：覆盖要素属性

2 个答案: