-1

我的目标是制作一个包含交互式视频的网页，在这里搜索时，我发现了一个指向适合我需要的 jsFiddle的链接。

由于代码在 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>

我尝试将 JavaScript 包装在 jQuery DOM 就绪调用中，但无济于事：

$(document).ready(function() {
    // The JavaScript here
});
4

2 回答 2

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>标签之前）。大多数浏览器可能会容忍，但在技术上不是一个好主意。

于 2012-04-22T22:38:22.473 回答
0

在 html 之后移动头部

所以看起来像

<html>
<head>
<script...etc..
于 2012-04-22T22:38:31.950 回答