Video Playlist

[simple_user]

Hello all,

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

<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.

[simple_user]

This code seems to work for me so far, if anyone has any ideas for improvements please let me know.

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

[simple_user]

Ok this didn't work:-

	<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.

[glenvern]

xx