Question

寻找一种集成两个插件的方法，这样我就可以拥有一个带有可点击的html播放列表的HTML5视频播放器。为了做到这一点，我需要更改其中一个插件，而不是声明：

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

然后在每次点击时重新填充，它会仅保留当前内容，只替换source标记的内容。我正在尝试这样的事情：

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

我担心.replace()的语法错误，或者替换无法处理这样的字符串。

作为旁注，我知道我需要重新运行该函数才能使用新源重新加载，只是一个插件正在删除另一个插件的内容，所以我甚至都不知道有机会。

Answer 1

只需使用jquery选择它并覆盖源。（你可以在没有jQ的情况下做到，但不过）

var s = "newSourceString";
$(".videoClass source").html(s);

现在将类名放在视频属性中并消失。

Answer 2

只需从播放器文档中复制粘贴：

<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);

我相信这可以回答你原来的问题。

Answer 3

非常感谢Rudy的回答，它让我走上正轨，虽然我改变它来处理动态来源（他可能也可以）。

当您在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>

JAVASCRIPT：

<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>

javascript替换源标记内的代码

3 个答案: