自动播放 MediaElementPlayer

Posted 2023-05-07

【中文标题】自动播放 MediaElementPlayer

【英文标题】：Autoplay MediaElementPlayer

【发布时间】：2011-07-20 15:06:04

【问题描述】：

我希望在加载网站页面时自动播放视频。

我在我的页面上引用了 jquery.js、mediaelementplayer.js 和 mediaelementplayar.min.css 并添加了视频标签。

我尝试了很多方法，例如autoplay = true 并使用 javascript 代码，但我无法让它工作。

我正在使用 BlogEngine.Net 2.0。

我该怎么做？

【问题讨论】：

您必须提供更多信息。 Default.aspx 只是不播放媒体。

【参考方案1】：

这是 MediaElementJS 中的一个错误，自动播放适用于 native 和 silverlight，但需要一些关于 Flash 的帮助。

您可以监听 canPlay 事件并在 Flash 播放器准备好后立即开始播放。

setTimeout 技巧可能会在竞态条件下失败。

$('#playerid').mediaelementplayer(
    plugins: ['flash', 'silverlight'],
    success: function(mediaElement, domObject) 
        if (mediaElement.pluginType == 'flash') 
            mediaElement.addEventListener('canplay', function() 
                // Player is ready
                mediaElement.play();
            , false);
        
    ,
    error: function() 
        alert('Error setting media!');
    
);

【讨论】：

您好，您能告诉我如何停止 youtube mediaelement 的自动播放吗？

【参考方案2】：

您可以将autoplay="true" 属性添加到<video> 标签中，如下所示：

<video   poster="some_image.jpg" controls="controls" 
    autoplay="true">

  <source type="video/mp4" src="myvideo.mp4" />
  <source type="video/webm" src="myvideo.webm" />
  <source type="video/ogg" src="myvideo.ogv" />
  <object   type="application/x-shockwave-flash" data="flashmediaelement.swf">
    <param name="movie" value="flashmediaelement.swf" />
    <param name="flashvars" value="controls=true&file=myvideo.mp4" />
    <img src="myvideo.jpg"   title="No video playback capabilities" />
  </object>
</video>

要在所有浏览器/设备上播放它，您可以使用 jQuery 引用该对象并调用其play() 方法。

<script>  
     var player = new MediaElementPlayer('#id-of-player',/* Options */);
     player.play(); 
</script>

更多信息，您可以查看here。

【讨论】：

替代解决方案的原因（“在所有浏览器上播放...”）实际上是这样的：autoplay="true" 属性在 MediaElement 的情况下不起作用。 Node.js 必须依靠其 Flash 视频播放器。

【参考方案3】：

这会很有帮助。

$('audio,video').mediaelementplayer(
        success: function(player, node) 
        $('.mejs-overlay-button').trigger('click');
        
);

【参考方案4】：

// works here (tested with MediaElements.js 2.1.9)
$(document).ready(function () 
  $('video,audio').mediaelementplayer().load();
);

【参考方案5】：

除非我错过了这一点，否则只需将“自动播放”添加到 html5 视频标签

【讨论】：

在不支持 <video> 并且将 Flash 播放器作为后备解决方案的浏览器中不能与 MediaElementPlayer 一起使用。

【参考方案6】：

var player = new MediaElementPlayer('video', 
    startVolume: 0.8,
    features: ['playpause','progress'],
    autoplay: true,
    audioWidth: 250,
    audioHeight: 40
    
);


player.play();

只需创建您自己的对象并通过 play() 启动它；

【参考方案7】：

虽然 user932056 的建议对我来说并不完全奏效，但我使用了页面顶部的总体思路，最终奏效了：

<script type="text/javascript">
$(document).ready(function() 
   $("div.mejs-container .mejs-button").trigger('click');
);
</script>

【参考方案8】：

这是我在 HTML5 视频案例和 Flash 播放器中编写并为我工作的代码；

$('video,audio').mediaelementplayer(
   mode: 'auto_plugin',
   defaultVideoWidth: 480, 
   defaultVideoHeight: 360,
   success: function (me) 
      whenPlayerReadyToPlay(me, function () 
         me.play();
      )
   
);

function whenVideoReadyToPlay(me, callback) 
   if (me.pluginType !== 'flash') 
      me.addEventListener('loadstart', function (e) 
         callback();
      , false);

      return;
   

   if (me.attributes.preload === 'none') 
      $(me.pluginElement).ready(function (e) 
         callback();
      );
   
   else 
      me.addEventListener('canplay', function (e) 
         callback();
      , false);
   

【讨论】：

哇，这解决了！播放器是原生 HTML5，但在添加 mode: 'auto_plugin' 属性后改为使用 Flash，这正常吗？您如何找到该属性？文档中没有列出它。

我在 Google 的某个地方找到了它 :-) 我也没有在文档中找到它。

【参考方案9】：

代码如下：

$(document).ready(function () 

        $('video,audio').mediaelementplayer( defaultVideoWidth: 480, defaultVideoHeight: 360 );

        setTimeout('eventClickTrigger()', 1000);
    );

    function eventClickTrigger() 

        $('.mep-overlay').trigger('click');
    

简单，但花了我一个星期

【讨论】：

这样代码和标签中的自动播放工作得很好 - 但我在一堆内容中进行 Ajaxing 并且它有点乱 - 翻了三倍 - 然后控件不起作用等等......无论如何 - 要记住的事情！

【参考方案10】：

这是我知道的最简单的方法。 我不确定这是否是你要找的，但如果我对你的问题的理解是正确的，这对我有用。我正在使用 MediaElement 2.9.4。

<script>
    MediaElement('player1', success: function(me)     
    me.play();
    );
</script>

【参考方案11】：

或者您可以将自动播放和/或preload="auto" 放在上面的jQuery 引用的<video> 标记中。

【参考方案12】：

对于那些在 safari ios（或任何其他拒绝自动播放的浏览器）上遇到 autoplay 问题的人，有一项新政策要求用户操作才能播放媒体（音频、视频），上述任何解决方案不管用。 更多细节在这里https://webkit.org/blog/6784/new-video-policies-for-ios/。

最好的解决方法是使用success回调来检测视频是否没有播放，然后附加一个按钮来播放视频

var video = document.querySelector('video');
var promise = $j('.video-wrap .video').mediaelementplayer(
        autoplay: true,
        playsinline: 1,
        success: function(media, node, player) 
          if(media.paused)
                $( "body" ).append( "<button type="button" id='playvideo'>Play</button>" );
          
        ,
        error: function (e) 
        
);
//add a click action to play video  
$( "#playvideo" ).click(function() 
        video.play()
);