www.webdeveloper.com
Results 1 to 4 of 4

Thread: Video Playlist

  1. #1
    Join Date
    Jul 2012
    Posts
    3

    Video Playlist

    Hello all,

    I wanted to create a video playlist with thumbnail but so far this is simplest method I found,

    Code:
    <style>
    video { display:none; }
    video:target { display: inline-block; }
    </style>
    <ul>
        <li><a href="#one">First video</a></li>
        <li><a href="#two">Second video</a></li>
    </ul>
    <video controls id="one">
        <source src="/media/uploads/2010/09/1527/7_bbc-radio-1-hq.mov"></source>
    </video>
    <video controls id="two">
        <source src="/media/uploads/2010/10/1557/7_costa-monkeys.mov"></source>
    </video>
    I found this code in stackoverflow website. Apparently the :target pseudo class is not supported in IE. Can anyone recommend a simple script.

    I know there are video players with playlist but I have my own design for the playlist and those players are coded with javascript, which I find difficult to modify to suite my needs.

  2. #2
    Join Date
    Jul 2012
    Posts
    3
    This code seems to work for me so far, if anyone has any ideas for improvements please let me know.

    Code:
    	<script type="text/javascript">
    function playVideo(sourceId, targetId) {
       if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
       if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
       targetId.innerHTML=sourceId.innerHTML;
       return false;
    }
    	</script>
    <video id="6" width="320" height="240" controls="controls" autoplay></video>
    
    <video id="1" style="display: none;"width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" /> 
      <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
    </video>
    <video id="2" style="display: none;" width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" /> 
      <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
    </video>
    <video id="3" style="display: none;" width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" /> 
      <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
    </video>
    <video id="4" style="display: none;" width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" /> 
      <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
    </video>
    
    <a href="#" onclick='return playVideo("1","6")'>Play Video</a>

  3. #3
    Join Date
    Jul 2012
    Posts
    3
    Ok this didn't work:-

    Code:
    	<script type="text/javascript">
    function playVideo(sourceId, targetId) {
    if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
    if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
    targetId.innerHTML=sourceId.innerHTML;
       return false;
    
       }
     	</script>
    <video id="6" width="320" height="240" controls="controls"></video>
    
    <video id="1" style="display: none;"width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" /> 
      <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
    </video>
    <video id="2" style="display: none;" width="320" height="240" controls="controls">
      <source src="movie1.mp4" type="video/mp4" />
      <source src="movie1.ogg" type="video/ogg" /> 
      <source src="movie1.webm" type="video/webm" />
    Your browser does not support the video tag.
    </video>
    
    
    <a href="#" onclick='return playVideo("1","6")'>Play Video 1</a>
    <a href="#" onclick='return playVideo("2","6")'>Play Video 2</a>

    Clicking on the first link the video plays but when clicking on second link nothing happens i.e. the videos don't swap over to the one that has been clicked.

  4. #4
    Join Date
    Jul 2003
    Posts
    138
    xx
    Last edited by glenvern; 07-17-2012 at 08:37 AM. Reason: wrong thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles