代码未能在外面的jsfiddle工作(code fails to work outside a js

我的目标是做一个网页，互动视频，同时寻找在这里，我遇到了一个链接指向一个适合我的需要的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>

我试图在一个jQuery DOM准备呼叫包裹的JavaScript，与无济于事：

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

Answer 1:

jQuery代码运行前的DOM准备好让你的jQuery代码没有找到页面中的任何对象，所以他们没有做任何事情。您应该在人体的最终定位之后的DOM项加载或使用jQuery（文件）。就绪（）来使你的代码等到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>标签）。大多数浏览器可能会容忍，但不是在技术上是一个好主意。