web-dev-qa-db-ja.com

MediaElementPlayerの自動再生

Webサイトのページが読み込まれたときに自動的にビデオを再生したい。

ページでjquery.js、mediaelementplayer.js、mediaelementplayar.min.cssを参照し、ビデオタグを追加しました。

私は非常に多くの方法を試しました、例えばautoplay = trueそしてjavascriptコードを使用しますが、私はそれを動作させることができませんでした。

BlogEngine.Net2.0を使用しています。

どうやってやるの？

mediaelement.js
11
Gencebay D.

これはMediaElementJSのバグであり、自動再生はネイティブおよびSilverlightで機能しますが、Flashについては少し助けが必要です。

canPlayイベントをリッスンし、FlashPlayerの準備ができたらすぐに再生を開始できます。

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!');
    }
});
22
xoreax

以下に示すように、_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>
_

詳細については、 ここ を確認してください。

8
Nagkumar Arkalgud

これは役に立ちます。

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

ポイントを逃さない限り、HTML5ビデオタグに「自動再生」を追加するだけです

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

User932056の提案は私には正確には機能しませんでしたが、ページの上部にある一般的なアイデアを使用して、最終的に機能しました。

<script type="text/javascript">
$(document).ready(function() {
   $("div.mejs-container .mejs-button").trigger('click');
});
</script>
2
Orange Crush
var player = new MediaElementPlayer('video', {
    startVolume: 0.8,
    features: ['playpause','progress'],
    autoplay: true,
    audioWidth: 250,
    audioHeight: 40
    }
);


player.play();

独自のオブジェクトを作成し、play（）を介して開始するだけです。

2
Markus

これが私が書いたコードで、HTML5ビデオケースとFlashPlayerでも機能します。

$('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);
   }
}
2
Martin Medard Dědík

または、上記のjQueryが参照しているpreload="auto"タグに自動再生や<video>を配置することもできます。

1
Mevo

コードは次のとおりです。

$(document).ready(function () {

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

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

    function eventClickTrigger() {

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

シンプルですが、1週間かかりました

1
Gencebay D.

これが私が知っている最も簡単な方法です。これがあなたが探しているものであるかどうかはわかりませんが、あなたの質問に対する私の理解が正しければ、これは私にとってはうまくいきました。 MediaElement2.9.4を使用しています。

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

サファリ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()
});
0
Taha Azzabi