code fails to work outside a jsFiddle
Question
I aim to make a web page with interactive videos, and while searching here I came across a link pointing to a jsFiddle that suits my needs .
As the code worked perfectly fine on the jsFiddle, it broke down when i tried to copy it into DreamWeaver (it seems the JavaScript had stopped working).
I had put it all together as such:
<html>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="sgrub.js"></script>
<script>
$('#video_1, #video_2').hide();
$('.icon_1').click(function() {
$('#video_2').fadeOut(function() {
$('#video_1').fadeIn();
});
});
$('.icon_2').click(function() {
$('#video_1').fadeOut(function() {
$('#video_2').fadeIn();
});
});
$('.icon_1').click(function() {
$('.video_2').get(0).pause();
$('.video_2').get(0).currentTime = 0;
$('.video_1').get(0).play();
});
$('.icon_2').click(function() {
$('.video_1').get(0).pause();
$('.video_1').get(0).currentTime = 0;
$('.video_2').get(0).play();
});
</script>
<head></head>
<body>
<div class="icon_1" id="mediaplayer">
cadillac
</div>
<div class="icon_2" id="mediaplayer2">
nike
</div>
<div id="video_1">
<video class="video_1" width="50%" height="50%" controls="controls"
poster="http://www.birds.com/wp-content/uploads/home/bird.jpg">
<source src="http://video-js.zencoder.com/oceans-clip.mp4"
type="video/mp4" />
</video>
</div>
<div id="video_2">
<video class="video_2" width="50%" height="50%" controls="controls"
poster="http://www.birds.com/wp-content/uploads/home/bird.jpg">
<source src="images/01.mp4" type="video/mp4" />
</video>
</div>
</body>
</html>
I have tried wrapping the JavaScript in a jQuery DOM ready call, with no avail:
$(document).ready(function() {
// The JavaScript here
});
2 answers
solution1
5 ACCPTED 2012-04-22 22:38:22
Your jQuery code is running BEFORE the DOM is ready so your jQuery code doesn't find any objects in the page so they don't do anything. You should either locate it at the end of the body AFTER the DOM items are loaded or use jQuery(document).ready() to make your code wait until the DOM is ready.
Your jsFiddle is set to only run your code after the DOM is loaded so that could be why it works in jsFiddle.
Change your code to this:
<script>
$(document).ready(function() {
$('#video_1, #video_2').hide();
$('.icon_1').click(function(){
$('#video_2').fadeOut(function(){
$('#video_1').fadeIn();
});
});
$('.icon_2').click(function(){
$('#video_1').fadeOut(function(){
$('#video_2').fadeIn();
});
});
$('.icon_1').click(function(){
$('.video_2').get(0).pause();
$('.video_2').get(0).currentTime = 0;
$('.video_1').get(0).play();
});
$('.icon_2').click(function(){
$('.video_1').get(0).pause();
$('.video_1').get(0).currentTime = 0;
$('.video_2').get(0).play();
});
});
</script>
You probably also want to fix the location of your script tags. They should either be inside the <head> tags or inside the <body> tags. You have them neither (before <head> tags). Most browsers will likely tolerate, but not technically a good idea.
solution2
0 2012-04-22 22:38:31
Move head just after html
So it looks like
<html>
<head>
<script...etc..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.