Play Youtube video in Basic HTML player with user control

Question

I have a bunch of youtube urls which i would like to play. I want like to play only the audio content in a basic HTML player with user controls like Play, pause, next. I am unable to add user control functionality(Nor able to play the videos in a HTML player, i am embedding the youtube video), thus the user has to click on the play button of the next video every time a video is completed. Any help will be appreciated.

Have you read the youtube api's guide? https://developers.google.com/youtube — Jonas Grumann, Mar 03 '15 at 08:25
I did go through it, but i didn't find a way to loop though the urls that i have . I might have use JS but i'm not sure about that. — Abhinav Yashkar, Mar 03 '15 at 08:29

score 0 · Answer 1 · edited May 23 '17 at 11:56

..continuing from the comments:

That's right you need to use js. I'll help you start: you can create an array with all your youtube urls:

var youtube_urls = ['https://www.youtube.com/watch?v=vpoi_l4jkyU', 'https://www.youtube.com/watch?v=Lml2SkB68ag', 'https://www.youtube.com/watch?v=awMiY-Ve1As'];

And then, using the api you listen for when a video is done playing and then start the next one:

Detect end video: How to detect when a youtube video finishes playing?

OR

Just create a playlist on youtube and embed the playlist. It'll loop through all the videos.

mido · Answer 2 · 2015-03-03T08:55:43.150

this should get you started:

// change this list to whatever you want
    var urls = ['http://upload.wikimedia.org/wikipedia/en/f/f9/Beatles_eleanor_rigby.ogg',
                'http://upload.wikimedia.org/wikipedia/commons/5/5b/Ludwig_van_Beethoven_-_Symphonie_5_c-moll_-_1._Allegro_con_brio.ogg'];
    var idx=0;
    var aud= document.getElementById('aud');
    aud.src=urls[idx];
    aud.addEventListener('ended', next); // for automatically starting the next.
    
    function play(){
        aud.play();
    }
    
    function pause(){
        aud.pause();
    }
    
    function next(){
        idx++;
        if(idx === urls.length) idx=0;
        aud.src = urls[idx];
        aud.play();
    }

            <audio id = 'aud'></audio>
    <button onclick="play();">play</button>
    <button onclick="pause();">pause</button>
    <button onclick="next();">next</button>

Play Youtube video in Basic HTML player with user control

2 Answers2