2017-08-03 1 views
1

Ich benutze eine Bibliothek video.js. Ich benutzte das Beispiel-Code von der Website:Die AngularJS-Bibliothek funktioniert nur, nachdem ich die Seite aktualisiert habe. Wenn ich den Status ändere, funktioniert sie nicht mehr

<video id="my-video" class="video-js vjs-default-skin" controls 
preload="auto" width="1000" height="600" data-setup='{ "playbackRates": [1, 
1.5, 2] }'> 
     <source src="file\undefined\1501667652598.mp4" type="video/mp4"> 
</video> 

und hinzugefügt, um die Skripte/css:

<link href="http://vjs.zencdn.net/6.2.4/video-js.css" rel="stylesheet"> 
<script src="http://vjs.zencdn.net/6.2.4/video.js"></script> 

Wenn ich die Seite gerade aktualisieren, es funktioniert gut. Wenn ich jedoch den Status ändere, wird standardmäßig der normale Videoplayer verwendet. Was könnte das Problem sein, vor dem ich stehe?

Staaten Definition sieht wie folgt aus:

angular.module("pamm").config(function ($stateProvider) { 
    $stateProvider 
     .state("user.topic", { 
      url: "/topic", 
      views: { 
       "[email protected]": { 
        templateUrl: "feature/user/topic/topic-list.html" 
       } 
      }, 
      params: { 
       section: null, 
       type: null 
      } 
     }) 
     .state("user.topic.details", { 
      url: "/details/:id", 
      views: { 
       "[email protected]": { 
        templateUrl: "feature/user/topic/topic-details.html" 
       } 
      }, 
      params: {course: null} 
     }) 
     .state("user.topic.result", { 
      url: "/result", 
      views: { 
       "[email protected]": { 
        templateUrl: "feature/user/topic/topic-result.html" 
       } 
      } 
     }) 
}); 
+0

Können Sie dieses Problem in Plunkr reproduzieren? –

+0

Ich glaube nicht, dass es möglich ist. Ich arbeite an einer großen Anwendung und es wird ein großes Stück eckigen Code zu reproduzieren benötigt ... Ich hoffe nur, jemand hatte ein ähnliches Problem. –

+0

Kannst du hier einfach den relevanten Teil deines Routers posten? – Alburkerk

Antwort

2

Sie benötigen Spieler manuell einrichten durch seine function Aufruf, wenn die <video> Tag wird erst nach dem Laden der Seite zu vervollständigen.

Der Grund ist video.js wird Ihren HTML-Code scannen und bestehendeTags automatisch einrichten, aber leider kann es Änderungen in Ihrem HTML nicht beobachten, wenn eckige Updates es. (reference)

Sie können den manuellen Setup-Code in einem Routen-Controller hinzufügen.

+0

Danke! Aber was machst du, wenn du ein paar Videos auf der gleichen Seite hast? –

+0

Ich denke, normale Selektoren sollten funktionieren. Nicht sicher, ob Sie mit dem Klassenselektor mehrere gleichzeitig einrichten können, wenn Sie dann keine anderen IDs oder Klassennamen verwenden können. – Icycool

Verwandte Themen