/    Sign up×
Community /Pin to ProfileBookmark

Video Playlist

Copy linkTweet thisAlerts:
Jul 17.2012

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>[/CODE]

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.

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@simple_userauthorJul 17.2012 — 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>[/CODE]
Copy linkTweet thisAlerts:
@simple_userauthorJul 17.2012 — 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>[/CODE]


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.
Copy linkTweet thisAlerts:
@glenvernJul 17.2012 — xx
×

Success!

Help @simple_user spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...