Charger une vidéo dans une div séparée, en utilisant jQuery

Question

Ok, je suis déjà en train de faire un bug sur ça pour le 2ème jour, et ça devrait être vraiment simple ... mais ça ne marche pas.

J'essaye de charger une vidéo dans un div séparé, quand un lien d'une liste imbriquée (dans un autre div) est cliqué.

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

Et le jQuery que j'ai:

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

J'ai aussi essayé de le faire avec un seul lien statique à une vidéo (au lieu de url thingy) , juste à des fins de test, mais cela ne fonctionne pas à nouveau.

J'ai également essayé de charger statiquement la vidéo dans la div, avec la balise <video> et cela a fonctionné. Mais pas de manière dynamique à travers les liens.

Je n'ai aucune idée où le problème est ...

UPDATE: I made a jsfiddle - il ne charge pas la vidéo (car ne peut pas accéder au fichier de jsFiddle), mais il charge la fenêtre vidéo. Est-il possible que je ne sois pas lié à la bibliothèque jQuery? Bien que je l'ai inclus comme source dans l'étiquette.

P.S. La vidéo doit être chargée depuis la machine locale, mais pas depuis Internet.

Answer 1

Je ne l'ai pas vraiment vu avant l'inclure bibliothèque à écrire directement comme vous l'avez fait <script src="jquery library here">... Et il est en fait ne fonctionne pas, car avec la première ligne où vous écrivez le src=, vous êtes juste, y compris la bibliothèque Ainsi, dans votre cas, vous n'avez pas entouré le code réel avec les balises <script>, mais seulement la bibliothèque.

Essayez de séparer, puis placez le code dans d'autres <script> tags. Comme ça:

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

En outre, il peut être source de confusion, la façon dont vous l'avez écrit, si vous devez changer la bibliothèque comprennent à l'avenir.

Alors avez juste le HTML comme ça:

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

Answer 2

L'URL ne devrait pas fonctionner, vous obtiendrez seulement l'élément de lien.

essayez le code ci-dessous:

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

et votre lien devrait ressembler à ceci:

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

Answer 3

Le url que vous essayez de spécifier est mentionné nulle part. En cliquant sur le a, vous obtiendrez l'entier html, en incluant le tag d'image. Ce n'est pas ce dont tu as besoin. Indiquez l'URL dans le href à la a comme ceci:

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

Dans votre javascript:

var url = $(this).attr('href'); au lieu de var url = this.href;

Answer 4

Si vous voulez ajouter du contenu HTML à un div ou un autre élément Vous n'utilisez pas .append? comme celui-ci

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

aussi $ (this) .html(); n'est pas ce dont vous avez besoin, vous devrez utiliser innerHTML

Answer 5

Appelez simplement la méthode "load" de la balise "video" lors de l'assignation dynamique de la source vidéo.

vous devez également modifier var url = $(this).html();-var url = this.href;

et changer <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>