CODEWITHSUNDEEP
javascripthtmlreplace
evankford
evankford

Reputation: 93

javascript replace code within source tag

Looking for a way to integrate two plugins so that I can have a HTML5 video player with a clickable html playlist. In order to do this, I need to alter one of the plugins so that instead of declaring:

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

and then refilling on each click, it leaves the current contents alone, only replacing the content of the source tags. I'm trying something like:

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

I worry that my syntax for .replace() is wrong, or that replace can't handle strings like that.

As a side note, I know I'll need to re-run the function in order for it to reload with the new source, it's just that one plugin is deleting the content of the other, so I don't even have a chance.

Upvotes: 0

Views: 1332

Answers (3)

evankford
evankford

Reputation: 93

Many thanks to Rudy for his answer, it put me on the right track, though I changed it to handle a dynamic source (his probably could too).

When you replace youtube videos in mediaelement.js you have to redeploy the plugin, so I ended up emptying the plugin container, storing all the hrefs as a data attribute in the list and then refilling the container with the appropriate html, and recalling the function at the end.

Here's the code:

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>

Upvotes: 0

Rudy
Rudy

Reputation: 2373

Just copy paste from the player documentation:

<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

EDIT

Answer to the question:

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

I believe this answers your original question.

Upvotes: 1

James_1x0
James_1x0

Reputation: 931

Just select it with jquery and overwrite the source. (You could do it without jQ, but nevertheless)

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

Now put the classname in your video attributes and fire away.

Upvotes: 1

Related Questions