2

私はまったくの初心者なので、お手柔らかにお願いします。

ビデオプレーヤーと、プレーヤーの右側にプレイリストとして機能するビデオのリストを持つWebページを作成しようとしています。ブラウザ間の互換性のために、'Video for Everyone' で生成された html を使用しています。

<video controls width="640" height="360">
    <source id='mp4src' src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    <source id='webmsrc' src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="allowFullScreen" value="true">
        <param name="wmode" value="transparent">
        <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}">
    <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below">
</object>

ユーザーがリスト項目をクリックすると、そのリスト項目に関連付けられたビデオがビデオ プレーヤーで再生されるようにします。これを行うために、私は HTML リストを作成し、各リスト項目に url1 と url2 と呼ばれる 2 つの疑似属性 (1 つは mp4 形式、もう 1 つは WebM 形式) を与えました。

<ul id='playlist'>
    <li class='plvid' id='vid1' url1='homilies/kursk1_30_11.mp4' url2='homilies/kursk1_30_11.webm'>
        <h5>Vid1</h5> <span class='descrip'>describevid1</span> <br> 
        <span class='runtime'>eternity or 1 hr.</span> 
    </li>
    <li class='plvid' id='vid2' url1='homilies/video.mp4' url2='homilies/video.webm'
        <h5>Vid2</h5> <span class='descrip'>describevid2</span> <br> 
        <span class='runtime'>eternity or 1 hr.</span> 
    </li>
</ul>

次に、理論的には次のことを行う jQuery をいくつか作成しました。

  1. 誰かがリスト項目をクリックすると、次のすべての操作が開始されることに注意してください。
  2. url1 および url2 疑似属性の値を取得し、jQuery 変数として保存します
  3. 現在 video タグ内にある 2 つのソース要素を削除します
  4. これらのソース要素を、src 属性の値として補間された変数を持つ 2 つの新しい HTML 文字列に置き換えます。

  5. ビデオを読み込む

    $(document).ready(function(){
    $('#playlist li').click(function(){
        var url1 = $(this).attr('url1');
        var url2 = $(this).attr('url2');
        $('.content video #mp4src').remove();
        $('.content video #webmsrc').remove();
        $('.content video').html(
            ""
        );
        $('.content video').html(
            ""
        );
        $('.content video')[0].load();
    });
});

(補足: どちらの html メソッドにも html 文字列がないことに気付きましたか? 実際にはあります! しかしどうやら私は思っていたよりもコードを壊すのが得意なようです。ブロックしてください. 誰かがそれを修正する方法を理解できたら...?)

そしてもちろん、何も機能しません。私が知る限り、リスト要素をクリックしてもソース要素は削除されません。つまり、Google がホストする jQuery CDN が壊れているか (ハァッ!)、非常に愚かで明らかに間違ったことをしているということです。これがプレイリストを設定する正しい方法かどうかさえわかりません。したがって、私に投げかけられたアドバイスは非常に高く評価されます。特に、最小限のバニラ JS が含まれており (ほとんどの場合、私は JS を知らないため)、アドバイスが穏やかに投げかけられます。私が間違っていることの正確な説明もいいでしょう。前もって感謝します！

4

1 に答える 1

4

まず最初に、すべての方々のご協力に感謝したいと思います。皆さんがいなければ、このジレンマを解決するのに少なくとも 1 週間はかかったでしょう。

あっ、待って。

とにかく、この質問に 50 年もかかっている貧乏人のためhttps:に、jQuery CDN リクエストの前に を配置することで問題を解決しました。どういうわけか、それは本当に違いを生みます。

于 2013-06-28T15:24:07.617 に答える