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在to 中指定 url，a如下所示：

<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 回答
1

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

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

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

这是一个工作的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>
于 2013-08-22T10:08:26.183 回答
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 回答