web-dev-qa-db-fra.com

Pourquoi la vidéo ne joue pas, la première fois, elle sera lue de manière dynamique, mais ne sera pas lue

J'utilise le plugin videojs pour lire mes vidéos de façon dynamique en cliquant sur chaque vidéo, mais cela ne lit pas ce que je fais de mal.

$(function(){
  
    $('.player-src').on('click',function(){
       //alert($(this).attr('data-src'));
       var videosrc = $(this).attr('data-src');
       videojs('my_video_1', {
			  sources: [{
			    src: videosrc,
			    type: 'video/mp4'
			  }, {
			    src: videosrc,
			    type: 'video/webm'
			  }]
			});
   });

});
ul{
  display:block;
  list-style: none;
  background:#eaeaed;
  padding:15px;
}

li.player-src{
     padding: 12px;
    background: orangered;
    color: #fff;
    display: inline-flex;
    margin: 12px;
    cursor: pointer;
}
<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul >
  <li class="player-src" data-src="/local/filename.mp4">play-video1</li>
  <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
  <li class="player-src" data-src="/local/filename.mp4">play-video3</li>
  <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
  <li class="player-src" data-src="/local/filename.mp4">play-video5</li>
</ul>



 <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" controls 
                        
                  data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
                   
                      <!-- <source src="uploads/thursday.mp4"  type='video/mp4'/> -->
                      <source src="https://vjs.zencdn.net/v/oceans.mp4" type='application/x-mpegURL' />
                      <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
                   
</video>

S'il vous plaît aidez-moi merci d'avance.

javascriptjqueryvideovideo.js
7
skBangalore

Vous initialisez encore et encore le lecteur vidéo, mais je pense qu'il vous suffit de changer de source. S'il vous plaît essayez de suivre.

$(function(){
  
    $('.player-src').on('click',function(){
    
       var videosrc = $(this).attr('data-src');
       var myPlayer = videojs('#my_video_1');
       myPlayer.src([ 
      { type: "video/mp4", src: videosrc },
      { type: "video/webm", src: videosrc },
      { type: "video/ogg", src: videosrc }]
      );
   });

});
<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul >
  <li class="player-src"  data-src="/local/filename.mp4">play-video1</li>
  <li class="player-src"  data-src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
  <li class="player-src"  data-src="/local/filename.mp4">play-video3</li>
  <li class="player-src"  data-src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
  <li class="player-src"  data-src="/local/filename.mp4">play-video5</li>
</ul>

 <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" controls       
                  data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
</video>

3
Amit Bhoyar

Si la seule chose que vous essayez d'atteindre est de permettre à l'utilisateur de sélectionner l'un des cinq fichiers vidéo à lire, je suggère alors que votre javascript puisse simplement copier le nom de fichier de la vidéo choisie dans le paramètre src d'un fichier. tag source unique, puis l'utilisateur clique sur le bouton de lecture pour le "lire".

En outre, plutôt que d'utiliser les cinq balises li, vous pouvez utiliser une liste déroulante, en ayant cinq balises d'option, à l'intérieur d'une balise de sélection. C'est comme ça que je le fais. (Remarque: si vous souhaitez que les cinq choix soient visibles en même temps, définissez le paramètre de taille de la balise select sur "5".)

Ok, voici l'URL d'une de mes pages vidéo, où j'ai 10 fichiers à choisir. (Je ne rend que les cinq premiers visibles au départ, en réglant le paramètre size à 5. Une barre de défilement verticale vous permet de faire défiler les 10 choix.)

https://weasel.firmfriends.us/Taxi-Series/

Il suffit de faire une "source de page de vue" (par un clic droit n'importe où sur ma page), Pour afficher mon balisage et javascript. Utiliser l’approche des balises select/option rend le javascript nécessaire trivial! (Mon JS est un peu plus long, uniquement parce que J'ai besoin de concaténer le nom de fichier à partir de segments et de manipuler des balises de texte de sous-titre analogues, mais dans votre cas, je penserais qu'il ne vous en faudrait pas plus .____.] que 4 ou 5 lignes de JS, total.)

Oh, et tout le code CSS et le balisage pour le texte "héros" ne vous sont PAS nécessaires. (Je l'ai ajouté après coup, pour obtenir cette ligne supplémentaire de nom-épisode "flottante/dissolvante" , qui s’affiche pendant les transitions pause/lecture.)

J'espère que ça aide. À votre santé...

2
Dave

Une instance de la classe Player est créée lorsqu'une des méthodes d'installation de Video.js est utilisée pour initialiser une vidéo.

 var player = videojs('#my_video_1');

Une fois créée, une instance est accessible de manière globale en utilisant player

Problème

votre erreur est définie source comme option pour chaque événement onclick d'élément. vous devez définir src pour chaque événement onclick

Html: 

<html>
<body>
<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="player-src" data-src="/local/filename.mp4">play-video1</li>
    <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
    <li class="player-src" data-src="/local/filename.mp4">play-video3</li>
    <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
    <li class="player-src" data-src="/local/filename.mp4">play-video5</li>
</ul>
<video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" controls
       data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type='application/x-mpegURL'/>
    <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
</video>
</body>
</html>

Script:  

 $(function () {
    var player = videojs('#my_video_1');
    $('.player-src').on('click', function () {
        var videosrc = $(this).attr('data-src');
        player.src([
            { type: "video/mp4", src: videosrc },
            { type: "video/webm", src: videosrc },
            { type: "video/ogg", src: videosrc }]
        );
        player.play();
    });
});

Exemple:

https://codepen.io/mostafami/pen/xQgxao

1
MostafaMashayekhi