javascript - La définition dynamique de la valeur de Video SRC via JQuery ne permet pas de lire la vidéo?

Question

<p id="video-box">
 <video style="object-fit: fill;width: 200px;height: 50px;" controls>
    <source src="">
  </video>
</p>
<a class="dj" href="javascript:;" src="http://www.w3school.com.cn/i/movie.mp4">点击</a> 
*{padding:0;margin:0;}
#video-box{display:none;}
$(".dj").on("click", function() {
   var src = $(this).data("src");
   $("#video-box source").prop("src",src)
   $("#video-box").show();
});

La démo est ici https://jsfiddle.net/r9u1cn7o/
Cliquez sur différentes étiquettes pour faire apparaître une boîte de dialogue contextuelle permettant de lire la vidéo correspondante. Cependant, j'ai réussi à attribuer une valeur à src via jquery, mais je ne le fais pas. Je ne sais pas pourquoi on ne peut pas y jouer ?

Answer 1

La valeur src de la source est attribuée avec succès via jQuery. Du point de vue du débogage, le navigateur ne lance pas de requête pour obtenir la vidéo correspondante, mais attribue simplement la valeur dans le src de la balise a à la source.

Mais si vous faites cela, le navigateur vous demandera l'adresse pour obtenir le fichier vidéo :

$(".dj").on("click", function() {
   var src = $(this).data("src"),
       sourceDom = $("<source src=\""+ src +"\">");
       
   $("#video-box video").append(sourceDom);
   $("#video-box").show();
   
   // 自动播放
   $("#video-box video")[0].play()
});

Par conséquent, on peut en déduire que lorsqu'il y a une balise source dans la vidéo, le navigateur obtiendra automatiquement l'adresse après le rendu Même si l'adresse change, le navigateur n'obtiendra plus l'adresse. Cependant, en insérant dynamiquement la balise source, le navigateur peut être déclenché pour redistribuer, obtenant ainsi le fichier à l'adresse correspondante pour la lecture.

Answer 2

<video>
    <source src="xxx.mp4"/>
    <source src="xxx.ogg"/>
</video>

Le src dans la source ne sera vérifié qu'une seule fois lors du rendu.
Pour ajuster dynamiquement le src, vous devez commencer par la vidéo. Si vous la modifiez comme suit, tout devrait bien se passer
$("#video-box video" ).prop("src",src)

Answer 3

N'utilisez pas la balise source, écrivez-la directement dans la balise vidéo ; utilisez plutôt attr(). De plus, n'écrivez pas la largeur et la hauteur de la balise vidéo dans le style, retirez-les ~

Answer 4

jsfidle ne peut pas intégrer de vidéos. Changez-le simplement en local

.

Answer 5

Les formats vidéo pris en charge par la balise vidéo incluent (1) les fichiers mp4 codés en H.264 (2) webm (3) ogg. Les fichiers avec d'autres suffixes ne sont temporairement pas pris en charge en raison de problèmes de brevet et d'autres problèmes. Vous pouvez envisager le transcodage et essayer. ça

Answer 6

Ajoutez simplement un événement play()