CODEWITHSUNDEEP
javascripthtmldynamic
Elmir Kouliev
Elmir Kouliev

Reputation: 87

How to change video source through selecting link - HTML

I'm trying to change the source of a video from selecting a link. So when the link is selected on the page, it will change the video overhead to the source of another video, sort of like a playlist. This is the code for my html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/    DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Videos</title>
<link rel="stylesheet" href="VideosPage.css">


<script src="jquery-1.7.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">

</script>

<video id="first_video" width="800" height="450" controls="controls" style="margin-left:380px;  padding:10px; border:1px solid black;">

<source src="video.mp4" type="video.mp4" />

</video>

 <br />


  <a> Other Video  </a>

Upvotes: 0

Views: 1317

Answers (3)

element119
element119

Reputation: 7625

Check out the HTML standard: http://www.whatwg.org/specs/web-apps/current-work/#video.

There's a couple of solutions you could use. One is loading the next video sequentially, like a playlist:

<script type="text/javascript">
var nextVideo = "path/of/next/video.mp4";
var videoPlayer = document.getElementById('video');
videoPlayer.onend = function(){
    videoPlayer.src = nextVideo;
}
</script>
<video id="videoPlayer" src="path/of/current/video.mp4" autoplay autobuffer controls />

Then, making a link to change it would be as simple as (for example):

$("a.change_link").click(function(){
    videoPlayer.src = nextVideo;
});

Upvotes: 1

Michael Zaporozhets
Michael Zaporozhets

Reputation: 24526

To achieve what you are asking for, if you stick the video path in say the alt of the link, you can then reference it and stick that into the src of the video onclick with some simple jquery.

Modified html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Videos</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="VideosPage.css">
<script src="jquery-1.7.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">

</script>
<video id="first_video" width="800" height="450" controls="controls" style="margin-left:380px;  padding:10px; border:1px solid black;">
<source src="video.mp4" type="video/mp3" />
</video>
 <br />
 <a alt="video2.mp4" id="other"> Other Video </a>​

Some jquery:

$('#other').click( function() { 
$('#first_video').children('source').attr('src',$(this).attr('alt'))
});​

Upvotes: 0

Yogesh Prajapati
Yogesh Prajapati

Reputation: 4870

in <source src="video.mp4" type="video.mp4" /> line type="video.mp4" is wrong you cant place this type of value here

here's is the some example of type : video/mp3, video/ogg, video/wbem.

Upvotes: 0

Related Questions