0

2 つのプラグインを統合して、クリック可能な HTML プレイリストを備えた HTML5 ビデオ プレーヤーを使用できるようにする方法を探しています。これを行うには、次のように宣言する代わりに、プラグインの 1 つを変更する必要があります。

var html = '';
    html += '<video width...>'
    html += '<source... /source>'
    html += '<.video>'
return html

sourceクリックするたびに再入力すると、現在のコンテンツはそのまま残り、タグのコンテンツのみが置き換えられます。私は次のようなことを試みています:

html.replace(/'<source>'.*'</source>'/ , '<source> + myNewContent + '</source>');
return html;

私の構文.replace()が間違っているか、replace がそのような文字列を処理できないのではないかと心配しています。

補足として、新しいソースをリロードするために関数を再実行する必要があることはわかっています.1つのプラグインが他のプラグインのコンテンツを削除しているだけなので、チャンスさえありません. .

4

3 に答える 3

1

プレーヤーのドキュメントからコピーして貼り付けるだけです。

<script>
    // JavaScript object for later use
    var player = new MediaElementPlayer('#player',/* Options */);
    // ... more code ...
    player.pause();
    player.setSrc('mynewfile.mp4'); /***********  this is what you want  ***********/
    player.play();
</script>

mediaelementjs.com

編集

質問への回答:

var source = '<source>1 1bla bla bla xx uu dfhf</source>'
var startStr = source.indexOf('<source>') + 8;
var endStr = source.indexOf('</source>');
var oldSrc = source.substring(startStr, endStr);
console.log(oldSrc);
source = source.replace(oldSrc, 'new source');
console.log(source);

これで元の質問に答えることができると思います。

于 2013-11-06T21:32:37.857 に答える
0

ルディの回答に感謝します。動的ソースを処理するように変更しましたが、正しい方向に進みました (おそらく彼も可能でした)。

mediaelement.js で youtube ビデオを置き換えると、プラグインを再デプロイする必要があるため、プラグイン コンテナーを空にし、すべての href をデータ属性としてリストに保存してから、コンテナーに適切な html を再入力し、関数を呼び出しました。最後に。

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

HTML:

    <div class="youtube-slide">
                 <div id="ytvideo"> 
                 <!--here's the initial video source-->
                        <video width="100%" height="100%" id="player1" preload="none" type="video/youtube" src="http://www.youtube.com/watch?feature=player_embedded&v=JUQXileHPQs" />
                 </div>
                 <!--the list of videos, each with a 'data-href' attribute storing a link, and the first one already activated as 'currentvideo'-->
                    <ul class="vidlist">
                        <li id="vid1" class="currentvideo" data-href="http://www.youtube.com/watch?feature=player_embedded&v=JUQXileHPQs"> <h3> "Cereus Bright"</h3> unplugged, anthemic ballad<br />recorded live in concert</li>
                        <li id="vid2" class data-href="http://www.youtube.com/watch?v=0RMtebCrJhY">  <h3> "Winds of Change" </h3>upbeat, funky, with upright bass<br />recorded live in studio </li>
                        <li id="vid3" class data-href="http://www.youtube.com/watch?v=7Ndm2o6p0A8"> <h3>"Some Strange Hold" </h3> melodic song of heartbreak <br /> recorded live (takeaway style)
                        </li>
                       </ul>
        </div>

ジャバスクリプト:

<script>
//call function the first time
var player = new MediaElementPlayer('#player1');            
        $('ul.vidlist li').click(function() {
        //clear the div of the player
            $('div#ytvideo').empty();   
        //switch the currentvideo classes, to allow styling
            $('.currentvideo').removeClass('currentvideo');
            $(this).addClass('currentvideo');
        //refill the player div, and call the plugin again
            $('div#ytvideo').html('<video width="100%" height="100%" id="player1" preload="none" type="video/youtube" src="' + $(this).attr('data-href') +'"/>');   
            var player = new MediaElementPlayer('#player1');
        });     
</script>
于 2013-11-08T06:17:11.413 に答える