-1

インタラクティブなビデオを含む Web ページを作成することを目指しています。ここで検索しているときに、ニーズに合った 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 に答える