0

自分が取り組んでいるサイトのホームページにビデオを追加する作業をしています。理想的には、デフォルトでYouTubeバージョンを表示し、その下に「YouTubeにアクセスできませんか？ここをクリックして別のバージョンを見る」などのボタンを追加したいと思います。

クリックすると、別のプレーヤーが同じビデオdivに読み込まれ、YouTubeバージョンが置き換えられます。

ビデオはyoutubeにアップロードされており、サイトには、wordpress用のvideo.jsプラグインを介して再生されるhtml5バージョンもあります。

ボタンをクリックして（可能であればページを更新せずに）代替のhtml5ビデオプレーヤーをdivにロードするにはどうすればよいですか？どういうわけか、これはjavascript / jquery / ajaxを介して実行できると思いますが、これを実行する方法がわかりません（私のjsレベルは初心者です）。

ありがとう！！

4

4 に答える 4

1

次の方法でdivをクリアできます。

$("#yourDivID").empty()

次に、divに新しいコンテンツを入力します

var newHtml = "Whatever you want!"
$("#yourDivID").append(newHtml);

または

$("#yourDivID").html(newHtml);

Div 内のコンテンツを置き換える非常に原始的な例を次に示します: http://jsfiddle.net/FJuwd/

于 2013-03-21T14:26:21.367 に答える
0

jQuery ソリューション: div を作成し、ボタンのクリック時にビデオを入力するだけです。これを行うには多くの方法があります。長さのチェックは、別のビデオをアップすることを排除するためだけにあります。

<div id="player"><div>
<button id="clickme">Click to play video</button>   

 $("#clickme").on("click", function(e) {
    if($('#myfileplayer').length == 0) {
        var mydiv = $("#player");
        var myvideo = $("<video id='myfileplayer' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv' width='320' height='240' controls></video>");
        mydiv.append(myvideo);
    }
});

例を見る

于 2013-03-21T14:43:19.043 に答える
0

助けてくれて本当にありがとう。この場所が大好きです。

実際には、2 つの異なるビデオを含む div を切り替えるだけで、これをより簡単に解決できました。なぜ私が最初にこれを考えなかったのか分かりません。コンテンツを実際に削除するのではなく、非表示にするだけですが、私にとってはうまくいくと思います。

html

<div id="youtube">my youtube vid</div>
<div id="html5" style="display:none;">my alternate vid</div>

<input type="button" value="switch video" id="click"/>

jquery

$(function(){
  $('#click').click(function(){
     $('#youtube').toggle();
     $('#html5').toggle(); 
  });
});

私もjsでこれを試したので、divが切り替えられるとYouTubeビデオが削除され、再生が停止します

$(function(){
  $('#click').click(function(){
     $('#youtube').toggle();
     $('#html5').toggle(); 
     $('#youtube').empty();

  });
});

これは機能しますが、元に戻すときに YouTube ビデオを追加する方法がわかりませんでした。大したことではありません - ただ私が興味を持っていたものです。私はそれが.appendでできると仮定しています。

これに関する問題は、両方の vid がショートコードとして wordpress ページに存在するため、少し複雑になることです。トグルを機能させるために、wordpressページでこれらのIDを使用してショートドキュメントをdivでラップし、jsをページテンプレートに追加しました。もう一度！

于 2013-03-21T20:09:27.203 に答える
0

HTML

<div id="myvideodiv"> </div>

スクリプト内

mybutton.click(function(){

    playerMethod("myvideodiv").setup({ //here player intializations based on sepecific type
        file: "/uploads/example.mp4",
        height: 360,
        image: "/uploads/example.jpg",
        width: 640
    });


})

こちらの例を参照してください。

于 2013-03-21T14:26:55.667 に答える