Question

好的，我已经在第二天讨论这个了，它应该非常简单......但它不起作用。

当我点击嵌套列表中的链接（在另一个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东西），仅用于测试目的，但它不再起作用。

我还尝试将视频静态加载到div中，使用<video>标记并且它有效。但不是通过链接的动态方式。

我不知道问题出在哪里......

UPDATE: I made a jsfiddle - 它不加载视频（因为无法从 jsfiddle 访问该文件），但它会加载视频窗口。那么有可能我不知道如何链接到jQuery库？虽然我已将其作为标记中的源包含。

P.S。视频应该从本地计算机加载，但不能从Internet加载。

Answer 1

我没有真正看到包含库之前直接写的<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>

Answer 2

您尝试指定的url未在任何地方提及。点击a会显示整个html，包括图片代码。这不是你需要的。将href中的网址指定为a，如下所示：

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

在你的javascript中：

var url = $(this).attr('href');代替var url = this.href;

Answer 3

如果你想将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

Answer 4

每当动态分配视频源时，只需调用“视频”标记的“加载”方法即可。

您还需要将var url = $(this).html();更改为var url = this.href;

并将<li><a href="javascript: void(0)" class="video">更改为<li><a href="testvideo.mp4" class="video">

Here's a working jsFiddle

<强>使用Javascript：

$(document).ready(function()
{
    $(".video").click(function(event) 
    {
        event.preventDefault();
        var url = this.href; // Optionally you can also use -> $(this).attr('href') 
        $("#mediaWindow").html('<video width="640" height="360" controls><source src="'+url+'" type="video/mp4" /></video>');
        $("#mediaWindow video").get(0).load(); //Just make a call to load() method
    });
});

<强> HTML：

<li>Installation
    <ul>
        <li><a href="vid.mp4" class="video">  <!-- Change href -->
            <img src="play_icon.png" alt="play_video_icon" title="Video tutorial" />
            Startup</a></li>
        ...
    </ul>
</li>

Answer 5

网址不起作用，您只会获得链接元素。

尝试下面的代码：

$(".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">

使用jQuery在单独的div中加载视频

5 个答案: