Question

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

我在我的网页上引用了jquery.js，mediaelementplayer.js和mediaelementplayar.min.css，并添加了视频标记。

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

我正在使用BlogEngine.Net 2.0。

我该怎么做？

Answer 1

这是MediaElementJS中的一个错误，自动播放适用于本机和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!');
    }
});

Answer 2

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

<video width="100%" height="auto" 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 width="320" height="240" 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" width="320" height="240" title="No video playback capabilities" />
  </object>
</video>

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

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

有关详细信息，请查看here。

Answer 3

这可能会有所帮助。

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

Answer 4

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

Answer 5

除非我错过了这一点，否则只需将'autoplay'添加到HTML5视频标记

即可

Answer 6

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


player.play();

只需创建自己的对象并通过play（）启动它;

Answer 7

尽管user932056的建议对我来说并不完全有用，但我在页面顶部使用了最终有效的概念：

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

Answer 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);
   }
}

Answer 9

这是代码：

$(document).ready(function () {

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

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

    function eventClickTrigger() {

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

简单，但花了我一个星期

Answer 10

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

Answer 11

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

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

Answer 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()
});

自动播放MediaElementPlayer

12 个答案: