Use jquery to Append streaming video from a php page containing basically object tags. when different links for videos are clicked
Im a newbie to jquery. I really require assistance with putting jquery in my code
i have some links i.e. link1 link2 link3
i also have a div tag <div class="vid"></div> WHICH IS WHERE THE VIDEOS OBTAINED WILL BE APPENDED.
I have a php page that fetches A STREAMING video with an <object> tag FROM MANY 4 IP CAMERAS
what i'm trying to do is when i click on the link[i] with href="page?ip="ipadd, i want the video jquery to fetch the page that calls the video and APPEND it to the div tag.
I was thinking of being able to send a get request with the ip address (which is the h开发者_运维知识库ref on the links) to the php page handling the video, so it can use the ip address to pick the correct video from the correct video (IM STREAMING THEM FROM AN IP CAMERA.) That is why i want to use jquery to load each video as the link is being clicked. But i really have no clue on how that works.
Ok Gaby i have added a line check my sample page now i added the
$('a.video-link').click(function(event){
event.preventDefault(); ....}
my page now becomes
<html>
<head>
<script type="text/javascript" src="jsfile.js"></script>
</head>
<body>
<a href="akin3.html" class="video-link" >link 1</a>
...
<div class="vid" >
</div>
<script>
$(document).ready(function(){
$('a.video-link').click(function(event){
event.preventDefault();
// get the contents of the clicked Url and then append them at the div with class vid
$.get( this.href,
function(data){
$('.vid').append( data );
}
);
return false;
});
});
</script>
</body>
</html>
but when i click on the link it appends. if i try to click a link that i have clicked previously, it clears the div tag and jumps to the link that i an clicking the second time. i need it to append that link still(being able to append a link multiple time). any help??
add a class to your links for example video-link
<a href=".." class="video-link">link 1</a>
<a href=".." class="video-link">link 2</a>
and use
$('a.video-link').click(function(){
// load and put the contents of the url in the div with class vid
$('div.vid').load( this.href );
return false;
});
reference: the .load() method
The above solution will replace the contents of the vid div.
If you want to append it at the end (keeping the current contents) then use
$('a.video-link').click(function(){
// get the contents of the clicked Url and then append them at the div with class vid
$.get( this.href,
function(data){
$('div.vid').append( data );
}
);
return false;
});
reference: the .get() method
加载中,请稍侯......
精彩评论