Mediaelement.js：ポスター画像を変更するにはどうすればよいですか？

Question

JS経由でビデオソースを変更しようとしています。それはほとんどの作業です。

var basename = "video/whatever"; 
$("#myvideo")[0].setSrc([ 
    {type: "video/mp4", src: basename + ".mp4"}, 
    {type: "video/webm", src: basename + ".webm"}, 
    {type: "video/ogg", src: basename + ".ogv"} 
]); 

だから、最初の問題：私は、ソースを変更したときに一時停止ボタンではなく遊びよりも示しており、大きなオーバーレイ再生ボタンは、それが一時停止されているにもかかわらず、表示されません。 setSrc呼び出しの前後にstop（）とpause（）とsetCurrentTime（0）のさまざまな組み合わせを送信しようとしましたが、運はありません。

もっと重要な問題：私はビデオのポスター画像を変更する方法を見つけていません。私はFlash/Silverlightのフォールバックについても更新したいので、APIのメソッドを変更することを期待していました。私はビデオ要素上のポスター属性を変更しようとしましたが、それはそれを行うようには見えません。

Answer 1

で動作するはず

変更私は、これはかなり古い質問です知っているが、私は私が私のために働いていた答えを投稿だろうと思いました。

var basename = "video/whatever"; 
// Where videoPlayer is the video element. 
if(!videoPlayer.paused) { 
    videoPlayer.pause(); 
} 
setTimeout(function(){ 
    // Set poster image 
    $('.mejs-poster').empty().append('<img src="'+ basename + '.jpg"/>').show(); 

    // Set video source 
    videoPlayer.setSrc([ 
     {type: "video/mp4", src: basename + ".mp4"}, 
     {type: "video/webm", src: basename + ".webm"}, 
     {type: "video/ogg", src: basename + ".ogv"} 
    ]); 
}, 0); 

は、ここでのsetTimeoutが何をしているかの良い説明です：https://stackoverflow.com/a/779785/1425269。

使用しているテーマに応じて、ポスター画像にもCSSが必要な場合があります。

.mejs-poster img { 
    padding: 0; 
    border: 0; 
    width: 100%; 
    height: auto; 
} 

Answer 2

ええと、これはまだ開いているので、私は完全に別のアプローチをとることをお勧めします。

• セットアップ4 htmlのビデオは、あなたが役に立てば幸いに表示されている1トグルし、それを

を再生するにはjavascriptの

使用を必要とする属性を持つ各オブジェクト！

Answer 3

全く異なるアプローチをとってください。

アプローチ1：

<video controls="controls" id="Player" height="200" width="600"> 
<source src="video.mp4"> 
<object id="Player" height=200" width="600" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> 
<!-- Windows Media Player Backup For IE --> 
<param name="Showcontrols" value="True"> 
<param name="URL" value="video.mp4"> 
<param name="AllowShuffle" value="Yes"> 
<param name="autoStart" value="True"> 
<param name="Volume" value="100"> 
<param name="EnableContextMenu" value="False"> 
<!-- For browsers that do not support HTML5 Video --> 
<embed src="video.mp4" autoplay="autoplay" controls="controls" height="200" width="600" id="Player"> 
</object> 
</video> 

（HTML 5ビデオが常に正しくレンダリングされません、時にはそうでない場合は、ビデオソースの変更はできませんので、<object>タグはIE用です）

• すべてのブラウザでソースコードを変更する（<video>などのsrcを変更できないIE以外）document.getElementById("player").src="newvideo.mp4"

• Internet Explorerのコードは次のとおりです。Player.url = "newvideo.mp4"

• 追加の問題を引き起こす可能性のあるブラウザはSafariだけです。

アプローチ2：（！あまりにもjQueryを使って使用することができます）

• 、独自の<span id="myvideo2">または<div id="myvideo2">タグ内にビデオを配置します。 IDを指定してください（例： 「myvideo2」document.getElementById("myvideo2").innerHTML= /*Escaped Javascript for the HTML code for the video with new source"*/
• を使用してinnerHTMLのは、すべてのブラウザ