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

Question

好吧，我已经在第 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 中标签，它起作用了。但不是通过链接的动态方式。

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

UPDATE: I made a jsfiddle - 它不会加载视频(因为无法从 jsfiddle 访问文件)，但会加载视频窗口。那么有没有可能我以某种方式没有链接到 jQuery 库？尽管我已将其作为来源包含在标签中。

附言视频应该从本地机器加载，而不是从 Internet 加载。

Answer 1

我还真没见过像你这样直接写include库<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>