0

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

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

然后在每次点击时重新填充，它只保留当前内容，只替换source标签的内容。我正在尝试类似的东西：

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

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

作为旁注，我知道我需要重新运行该功能才能重新加载新源，只是一个插件正在删除另一个插件的内容，所以我什至没有机会.

4

3 回答 3

1

只需使用 jquery 选择它并覆盖源。（你可以在没有 jQ 的情况下做到这一点，但无论如何）

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

现在将类名放入您的视频属性中并开火。

于 2013-11-06T21:19:07.923 回答
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

非常感谢 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>
于 2013-11-08T06:17:11.413 回答