我的目标是创建一个包含互动视频的网页,在此处搜索时,我遇到了一个指向jsFiddle that suits my needs的链接。
由于代码在jsFiddle上工作得非常好,当我试图将其复制到DreamWeaver时它崩溃了(似乎JavaScript已停止工作)。
我把它全部放在一起:
<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>
我尝试在jQuery DOM就绪调用中包装JavaScript,但没有用:
$(document).ready(function() {
// The JavaScript here
});
答案 0 :(得分:5)
您的jQuery代码在DOM准备好之前运行,因此您的jQuery代码在页面中找不到任何对象,因此它们不执行任何操作。您应该在加载DOM项之后将其放在正文的末尾,或者使用jQuery(document).ready()使代码等到DOM准备就绪。
您的jsFiddle设置为仅在加载DOM后运行您的代码,这可能是它在jsFiddle中工作的原因。
将您的代码更改为:
<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>
您可能还想修复脚本标记的位置。它们应位于<head>
标记内或<body>
标记内。你也没有(在<head>
标签之前)。大多数浏览器可能会容忍,但技术上不是一个好主意。
答案 1 :(得分:0)
在html之后移动头
所以它看起来像
<html>
<head>
<script...etc..