2

わかりました、私はすでに2日目にこれを盗聴しています.それは本当に簡単なはずです.しかし、それは機能していません.

divネストされたリスト (別の ) からのリンクがクリックされたときに、別の にビデオを読み込もうとしていdivます。

ここに2つのdivがあります：

    <div id="mediaWindow">

    </div>
    <div id="treeviewMenu" runat="server">
        <ul id="LinkedList1" class="LinkedList">
            <li>Installation
                <ul>
                    <li><a href="javascript: void(0)" class="video">
                        <img src="play_icon.png" alt="play_video_icon" title="Video tutorial" />
                        Startup</a></li>
                    <li><a href="javascript: void(0)" class="video">
                        <img src="play_icon.png" alt="play_video_icon" title="Video tutorial" />
                        Getting there</a></li>
                    <li>
.....

そして私が持っているjQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    $(document).ready(function()
    {
        $(".video").click(function(event) 
        {
            event.preventDefault();
            var url = $(this).html();
            $("#mediaWindow").html('<video width="640" height="360" controls><source src="'+url+'" type="video/mp4" /></video>');
        });
    });
    </script>

また、テスト目的で、ビデオへの単一の静的リンク（ものの代わりにurl）でそれを試みましたが、再び機能しません。

<video>また、タグを使用してビデオをdivに静的にロードしようとしましたが、うまくいきました。ただし、リンクを介した動的な方法ではありません。

問題がどこにあるのかわかりません...

更新: 私は jsfiddle を作成しました- ビデオをロードしません ( jsfiddleからファイルにアクセスできないため) が、ビデオ ウィンドウをロードします。どういうわけかjQueryライブラリにリンクされない可能性はありますか? タグにソースとして含めましたが。

PS ビデオはローカル マシンからロードする必要がありますが、インターネットからロードする必要はありません。

4

5 に答える 5

3

インクルードライブラリがあなたのように直接書かれる前に実際に見たことがありません。<script src="jquery library here">... 実際には機能してsrc=いません.タグ付きの実際のコードです<script>が、ライブラリのみが含まれています。

<script>コードを分離してから、コードを他のタグで囲みます。そのように：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".video").click(function (е) {
                е.preventDefault();
                var url = this.href;
                $("#mediaWindow").html('<video width="640" height="360" controls><source src="' + url + '" type="video/mp4" /></video>');
            });
        });
    </script>

さらに、将来インクルード ライブラリを変更する必要がある場合、あなたが書いた方法は混乱を招く可能性があります。

次に、HTML を次のようにします。

<li>
<a href="testVideo.mp4" class="video">
<img src="play_icon.png" alt="play_video_icon" title="Video tutorial" />
Startup</a>
</li>
于 2013-08-22T11:54:55.063 に答える
1

指定しようとしているはurlどこにも言及されていません。をクリックすると、画像タグを含むa全体が表示されます。htmlこれは必要なものではありません。href次のaように URL を指定します。

<a href="video/yourVideo.mp4" class="video">...</a></li>

あなたのJavaScriptで：

var url = $(this).attr('href');それ以外のvar url = this.href;

于 2013-08-22T09:14:08.240 に答える
1

HTML コンテンツを div またはその他の要素に追加する場合、.append を使用していませんか? このような

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    $(document).ready(function()
    {
        $(".video").click(function(event) 
        {
            event.preventDefault();
            var url = $(this).html(); //this will not work
            $("#mediaWindow").append('<video width="640" height="360" controls><source src="'+url+'" type="video/mp4" /></video>');
        });
    });
    </script>

$(this).html(); も 必要なものではありません。innerHTML を使用する必要があります。

于 2013-08-22T09:16:22.047 に答える
0

URL は機能しないはずです。リンク要素のみが取得されます。

以下のコードを試してください。

$(".video").click(function(event) 
    {
        event.preventDefault();
        var url = this.href;
        $("#mediaWindow").html('<video width="640" height="360" controls><source src="'+url+'" type="video/mp4" /></video>');
    });

リンクは次のようになります。

<a href="yourvideourl.mp4" class="video">
于 2013-08-22T09:01:29.197 に答える