javascript - Load a video in separate div, using jQuery - Stack Overflow

admin管理员组

文章数量:1296465

Ok, I am bugging on this for 2nd day already, and it should be really simple... but it's not working.

I am trying to load a video in a separate div, when a link from a nested list (in another div) is clicked.

Here's the 2 divs:

    <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>
.....

And the jQuery that I have:

<script src="//ajax.googleapis/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>

I also tried doing it with a single static link to a video (instead of the url thingy), just of testing purposes, but it doesn't work again.

I also tried statically loading the video into the div, with the <video> tag and it worked. But not in the dynamic way through the links.

I have no clue where the problem is...

UPDATE: I made a jsfiddle - it doesn't load the video (because cannot access the file from jsfiddle), but it loads the video window. So is it possible that I somehow don't get linked to the jQuery library? Although I have included it as source in the tag.

P.S. The video should be loaded from the local machine, but not from the Internet.

Ok, I am bugging on this for 2nd day already, and it should be really simple... but it's not working.

I am trying to load a video in a separate div, when a link from a nested list (in another div) is clicked.

Here's the 2 divs:

    <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>
.....

And the jQuery that I have:

<script src="//ajax.googleapis./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>

I also tried doing it with a single static link to a video (instead of the url thingy), just of testing purposes, but it doesn't work again.

I also tried statically loading the video into the div, with the <video> tag and it worked. But not in the dynamic way through the links.

I have no clue where the problem is...

UPDATE: I made a jsfiddle - it doesn't load the video (because cannot access the file from jsfiddle), but it loads the video window. So is it possible that I somehow don't get linked to the jQuery library? Although I have included it as source in the tag.

P.S. The video should be loaded from the local machine, but not from the Internet.

• javascript
• jquery
• html
• video
• video-streaming

Share Follow edited Aug 22, 2013 at 9:42 Syspect asked Aug 22, 2013 at 8:54 SyspectSyspect 92177 gold badges2222 silver badges5050 bronze badges 1

• @Alvaro - what is a "fiddle" ? O.o – Syspect Commented Aug 22, 2013 at 8:57

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

I haven't really seen before the include library to be written directly like you did <script src="jquery library here">... And it's actually not working because with the first line where you write the src=, you're just including the library, thus in your case you didn't surround the actual code with <script> tags, but only included the library.

Try to separate it and then enclose the code into other <script> tags. Like that:

<script src="http://code.jquery./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>

Furthermore it might be confusing, the way you wrote it, if you have to change the include library in future.

Then just have the HTML like that:

<li>
<a href="testVideo.mp4" class="video">
<img src="play_icon.png" alt="play_video_icon" title="Video tutorial" />
Startup</a>
</li>

If you want to append HTML content to any div or other element y u are not using .append? like this

 <script src="//ajax.googleapis./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>

also $(this).html(); is not what you need you will have to use innerHTML

The url which you are trying to specify is not mentioned anywhere. Clicking on the a will give the entire html, including the image tag. This is not what you need. Specify the url in the href to the a like so:

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

In your javascript:

var url = $(this).attr('href'); instead of var url = this.href;

Just call "load" method of "video" tag whenever dynamically assigning video source.

Also you need to change var url = $(this).html(); to var url = this.href;

and change <li><a href="javascript: void(0)" class="video"> to <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>

The url should not work, you'll get only the link element.

try the code below:

$(".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>');
    });

and your link should look like this :

<a href="yourvideourl.mp4" class="video">

本文标签： javascriptLoad a video in separate divusing jQueryStack Overflow