Create playlist with select-option and video elements, Object and embed

Asked

Viewed 319 times

0

To play Youtube videos on a playlist web page select-option, I bring a simple example:

Code

troca = function (link) { 
    document.getElementById('video').innerHTML = '<iframe src="'+link+'" width="420" height="315" frameborder="0" allowfullscreen></iframe>';
}
select {
    font-size:20px; 
    width:176px; 
    height:100%;
    padding:15px; 
    float: right;
}

option {
    font-size: 10pt;
    padding:10 10 10 10;
    float: left;
    cursor: pointer;
}

span {
    float:left;
}
<span id='video'>&nbsp;</span>

<select onChange="troca(this.options[this.selectedIndex].value);" size="4">
    <option value="https://www.youtube.com/embed/iZUojirTEgM" style="background-image: url(https://img.youtube.com/vi/iZUojirTEgM/default.jpg); background-repeat: no-repeat; padding-left: 10px; width:120px; height:90px;">stop-motion 1</option>
    <option value="https://www.youtube.com/embed/ZEOmtEyXJtU" style="background-image: url(https://img.youtube.com/vi/ZEOmtEyXJtU/default.jpg); background-repeat: no-repeat; padding-left: 10px; width:120px; height:90px;">stop-motion 2</option>
    <option value="https://www.youtube.com/embed/GSzCLf8tjP4" style="background-image: url(https://img.youtube.com/vi/GSzCLf8tjP4/default.jpg); background-repeat: no-repeat; padding-left: 10px; width:120px; height:90px;">stop-motion 3</option>
</select>

Example above applies using the <iframe> (recommended)

Used to use object and embed, but Youtube <object> and <embed> were suspended from January 2015. Moving on to migrate your videos to use <iframe>.

Well, now a question has arisen.

The interesting thing about the tag <video> is that you can set a "fallback" if the video fails to display.

In this case it would be ideal to display even the video through Flash.

<video width="420" height="315" src="video.webm" controls>
   <object  width="420" height="315" data="flvplayer.swf" type="application/x-shockwave-flash">
    <embed src="'+link+'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="420" height="315">
   <param value="'+link+'" name="movie"/>
</object>

How could I add the elements video, object and embed the function next to the select-option as playlist?

javascript html5-video embed playlist

  • This check is not Youtube itself that does inside the iframe?

  • What I meant is that iframe goes to a Youtube page. As in the example https://www.youtube.com/embed/iZUojirTEgM. Doesn’t this page already have a script to handle this kind of thing? Tu tested this iframe in older browsers?

  • Ah good, I thought I was in trouble even with Youtube.

  • for a while I don’t need to mess with videos, but I remember that if the browser doesn’t recognize the tag video he treats it as if it were div. Then you can add at the end of the tag video the source being a compatible player. I’ll put this in an answer for you to see better

2 answers

0


This routine just checks if the browser supports tag video, and directs an alternative.

<script>

// criar o elemento <video>
var video = document.createElement("video");

// acrescentar ao elemento <body>
document.body.appendChild(video);

troca = function (link)
{ 

// criando array com índice do valores do <option>
var array = link.split("|");

if('controls' in video){

document.getElementById('video').innerHTML = [
'<video width="420" height="315" controls>',
   '<source src="'+array[0]+'.mp4" type="video/mp4">',
   '<source src="'+array[0]+'.webm" type="video/webm">',
'</video>'
]

} else {

document.getElementById('video').innerHTML = [
'<object width="420" height="315" data="'+array[1]+'">',
   '<embed width="420" height="315" src="'+array[1]+'">',
   '</embed>',
 '</object>'
]
}
}
</script>

Explaining

Manipulating with Javascript

To create a video element, use the function document.createElement.

Use the "in" operator to check if the attribute exists in the element.

Whether it exists or not, the condition will apply the best option to the browser.

The variable array, defines index of the values separated by "|" in value of option 

// criar o elemento <video>
var video = document.createElement("video");

// acrescentar ao elemento <body>
document.body.appendChild(video);

troca = function (link)
{ 

// criando array com índice do valores do <option>
var array = link.split("|");

if('controls' in video){

document.getElementById('video').innerHTML = [
'<video width="420" height="315" controls>',
   '<source src="'+array[0]+'.mp4" type="video/mp4">',
   '<source src="'+array[0]+'.webm" type="video/webm">',
'</video>'
]

} else {

document.getElementById('video').innerHTML = [
'<object width="420" height="315" data="'+array[1]+'">',
   '<embed width="420" height="315" src="'+array[1]+'">',
   '</embed>',
 '</object>'
]
}
}
select {
	width:300px; 
	height:100%;
	padding:30px; 
	float: right;
	background-color: #FCFCFC;
}	

option {
	font-size: 12pt;
	color: white;
	padding: 10 10 10 10;
	margin: 0 auto;
	background-repeat: no-repeat; 
	background-position: center; 
	background-size: 196px; 110px;
	width: 196px; 
	height: 110px;
	text-align: center;
}

option:hover { 
	background-color: steelblue; 
	cursor: pointer; 
}
	<span id='video'>&nbsp;</span>

<select id="lista" onChange="troca(this.options[this.selectedIndex].value);" size="4">

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny|https://www.youtube.com/embed/yUQM7H4Swgw" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.jpg);"></option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2|https://www.youtube.com/embed/y8WJG7lrHCU" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.jpg);"></option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory|https://www.youtube.com/embed/ooSaxz-SHts" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.jpg);"></option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/meu_malvado_favorito_2|https://www.youtube.com/embed/B82b77UA9qY" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/meu_malvado_favorito_2.jpg);"></option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/animais_cantando|https://www.youtube.com/embed/qiEwyK7l5uw" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/animais_cantando.jpg);"></option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/a_capela_animais|https://www.youtube.com/embed/791zd6qfqoU" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/a_capela_animais.jpg);"></option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2|https://www.youtube.com/embed/91WYf1fhB9U" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.jpg);"></option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/peck_pocketed|https://www.youtube.com/embed/qmCWjjZketo" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/peck_pocketed.jpg);"></option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/equipment_these_days|https://www.youtube.com/embed/WxaAhc3jf5s" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/equipment_these_days.jpg);"></option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/skate|https://www.youtube.com/embed/Zlv6eSiGl1U" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/skate.jpg);"></option>

</select>

Access - demonstration

0

This site talks about a technique that consists of using the tag video usually with their sources, and after the last source you add a Flash player for compatibility.

EDIT

My initial answer does not adequately answer the question, so to better answer the question, I made an example at Jsbin and in the Codepen where I have a viewport to show the selected video and a list for the user to select the video.

The main idea is that the code consists of:

  • A container with all videos (display: none; by default)
  • A list for the user to choose the videos, where the link from that list points to the id of the corresponding video. Ex.: <a href="#video-1">Vídeo 1</a>.
  • A JS listening to the click event of the list items whose job it is to just hide the currently active video and show the user selected item.

Example

$(document).ready(function(){
    // cache do container
    var video_container = $('.playlist-viewport');

    $('.playlist-item').on('click', function(event){
        // pega apenas a hash do link
        var video_id = "#" + this.href.split('#')[1];

        // esconde o vídel atual
        video_container.find('.video.active').removeClass('active');
        
        // mostra o novo video
        $(video_id).addClass('active');

        // evita que o browser siga o link
        event.preventDefault();
        return false;
    });
});
body {
    background-color: #555;
    margin-top: 30px;
}

.playlist-viewport {
    list-style: none;
}

.playlist-viewport > .video {
    display: none;
}

.playlist-viewport > .video.active {
    display: block;
}
<!-- frameworks e bibliotecas -->
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- grid -->
<div class="container">
    <div class="row">
        <div class="col-xs-9">

            <!-- Container para os videos -->
            <ul class="playlist-viewport">
                <!-- Video 1 -->
                <li id="video-1" class="video active">
                    <!-- video responsivo (bootstrap) -->
                        <div class="embed-responsive embed-responsive-16by9">
                            <video class="embed-responsive-item" controls="controls" 
                            poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" >
                                <!-- sources para o player HTML5 -->
                                <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
                                <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
                                <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />

                                <!-- Fallback para player em Flash -->
                                <object type="application/x-shockwave-flash" 
                                    data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" 
                                    width="640" height="360">
                                    
                                    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
                                    <param name="allowFullScreen" value="true" />
                                    <param name="wmode" value="transparent" />
                                    <param name="flashVars" 
                                        value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />
                                    <img alt="Big Buck Bunny" 
                                        src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" 
                                        width="640" height="360" 
                                        title="No video playback capabilities, please download the video below" />
                                </object>
                            </video>
                    </div>
                </li>

                <li id="video-2" class="video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <video class="embed-responsive-item" controls="controls" >
                            <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
                            <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
                            <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 

                            <object type="application/x-shockwave-flash" 
                                data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" 
                                width="640" height="360">
                                
                                <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
                                <param name="allowFullScreen" value="true" />
                                <param name="wmode" value="transparent" />
                                <param name="flashVars" 
                                value="config={'playlist':[{'url ':'http%3A%2F%2Ftechslides.com%2Fdemos%2Fsample-videos%2Fsmall.mp4','autoPlay':false}]}" />
                            </object>
                        </video>
                    </div>
                </li>
            </ul>

        </div>

        <!-- Container da lista de vídeos -->
        <div class="col-xs-3">
            <ul class="list-group">
                <a href="#video-1" class="list-group-item playlist-item">Big Buck Bunny</a>
                <a href="#video-2" class="list-group-item playlist-item">Outro vídeo</a>
            </ul>
        </div>

    </div>
</div>

Browser other questions tagged javascript html5-video embed playlist

You are not signed in. Login or sign up in order to post.