1

私はJavascriptに少し慣れていないので、助けが必要です。過去 (何年も前) に基本的な HTML をプログラミングしたことがありますが、その多くは初めてのことです。いくつかのチュートリアルを読もうとしましたが、多くの情報が頭を悩ませています。これが私が達成しようとしていることの概要です：

目標

  • 息子がテニスをしているストリーミング ビデオをウェブサイトに載せたいと思っています。動画がかなり大きいので、Dailymotion クラウドにアカウントを登録してストリーミングできるようにしました。
  • 簡単な Web ページに、試合の日付、対戦相手、ストリーミング ビデオ ファイルへのハイパーリンクをリストアップしたいと思います。
  • ハイパーリンクをクリックすると、JavaScript ポップアップ ウィンドウが既存の Web ページの上にオーバーレイされ、その中で Dailymotion ビデオが再生されるようにしたいと考えています。

これが私がこれまでに行ったことです：

  • Dailymotion クラウドに問い合わせました。彼らは、これを達成するために jQuery で Colorbox プラグインを使用していると私に言いました。ユーザー サポート デスクは、例として次のコードを示しました: http://jsfiddle.net/YwhLm/。ここで何をすべきか本当にわかりませんでした。そこで、jquery スクリプトと colorbox スクリプトをダウンロードして、サンプル コードと組み合わせて使用​​する必要があると考えました。
  • 次に、jQuery (特に jquery.min.js) をダウンロードし、Web サイトのフォルダー ~/js にアップロードしました。
  • colorbox の Web サイトにアクセスして、すべてをダウンロードしました。ファイル「jquery.colorbox-min.js」を、Web サイトのルートにある同じ js フォルダーにアップロードしました。

  • 以下のコードを Web ページのヘッダー セクションに貼り付けました (フォーマットの問題により、ここでカット アンド ペーストするのは困難ですが、正確なコード フォーマットを確認するには、上記の jsfiddle URL をクリックしてください)。

    var iframeHtml = '<iframe id="my_iframe" src="http://api.dmcloud.net/player/embed/4bab4364f325e14f14000001/51b871b106361d1359000109?auth=1689337924-0-q4nqc9il-d3e054cef0daa979502cffe4348af0b4" frameborder="0"
allowfullscreen></iframe>';
$('#video_link').on('click', function(e) {
    $.colorbox({ 
        'html': iframeHtml,
        'transition': 'none',
        'title': 'My video'
    });
    e.preventDefault();
});

  • 次に、次のコードを Web ページの本文セクションに貼り付けました。

<a id="video_link" href="#">Video link</a>

問題は、これを行うたびに、多くのエラーが発生するように見えることです。ビデオは、ハ​​イパーリンクをクリックした後に開くのではなく、メイン ページで開きます。また、ページのバックグラウンドに、機能していないように見える Javascript コードがいくつかあります。

誰でも助けてもらえますか？私が間違っていることを一歩一歩教えてください。間違ったバージョンの colorbox または jquery をダウンロードしましたか? それらを適切な場所に配置しましたか？ヘッダーのコーディングが間違っていませんか? ボディコーディングは間違っていますか？助けてください。

ありがとう

4

0 に答える 0