角度单页面应用程序，videoJS就绪功能仅在页面加载时触发 [英] angular single page app, videoJS ready function only fires on page load

问题描述

尝试使用ng-view模板让videoJS在angular指令中工作。角度路由和模板注入都运行良好。

Trying to get videoJS to work in an angular directive using ng-view template. Angular routing and template injection is all working fine.

html代码：

<div ng-view>
</div>

模板代码：

<div ng-controller="VideoCntrl">
    <div class="row offset2" >
        <video id='myVideo' videodir controls class="video-js vjs-default-skin" >
            <source src="{{video.videoURL}}"  type="video/mp4" />
        </video>
    </div>
</div>

指令代码

    app.directive('videodir',function(){
        var linkFn;

        linkFn = function (scope, element, attrs){
               videojs("myVideo",{"techOrder": ["html5","flash"]},function(){
                    this.src({type: "video/mp4", src: scope.video.videoURL});
                    console.log(scope.video.videoURL);
                });
                console.log('linkfn');
            };

    return {
        restrict: 'A',
        link: linkFn
    }
});

指令videodir中的videojs ready函数仅在页面第一次被点击时触发或者如果我这样做页面重新加载。我第一次点击我的页面时，在控制台日志中看到我的视频的url来自scope.video.videoURL，而DOM正在使用videoJS。如果我点击导航链接加载一个不同的模板然后回来，videojs ready函数不会触发（即我没有在控制台日志中看到我的videoURL，并且DOM没有被videoJS更改。我看到'linkFn '每次加载模板代码时都在控制台中。我假设在我执行console.log（'linkFn'）的指令中，我可以在videojs（myVideo）对象上调用一些初始化代码，以便它可以操作正确的DOM，但我无法弄清楚它可能是什么。

The videojs ready function in the directive videodir ONLY fires the first time the page is hit or if I do a page reload. The first time I hit my page I see in console log the url of my video from scope.video.videoURL and the DOM is using videoJS. If I click on navigation links to load a different template and then come back, videojs ready function doesn't fire (i.e. I don't see my videoURL in the console log and the DOM is not changed by videoJS. I do see 'linkFn' in the console each time the template code is loaded. I assume in the directive where I am doing console.log('linkFn') there is some initialization code I can call on the videojs("myVideo") object so that it manipulates the DOM properly but I can't figure out what that might be.

任何帮助都非常感激。

推荐答案

当您在单页应用中使用带有角度的videoJ时，您需要在销毁范围时（当您离开创建播放器的状态时）手动销毁videojs播放器，当你再次创建它时重新加载它。

When you use videoJs with angular in a single page app, you need to destroy the videojs player manually when your scope is destroyed (when you navigate away from the state the player was created in), and reload it when you create it again.

就绪状态不会再次触发，因为当你导航回来时，videojs播放器在技术上已经创建了，只是你的$ scope无法跟踪它。

The ready state doesn't fire again because when you navigate back, the videojs player is technically already created, just your $scope has no way to keep track of it.

不是在DOM中定义播放器源，而是动态创建videojs对象

Rather than defining the player source in the DOM, create the videojs object dynamically

有用的链接

（动态创建一个玩家）

https：// github。 com / videojs / video.js / blob / stable / docs / guides / setup.md＃alternative-setup-for-dynamic-loaded-html

（以角度指令处置玩家）

(Disposing a player in angular directives)

https://github.com/videojs/video.js/issues/808

DOM

<video id='myVideo' videodir controls class="video-js vjs-default-skin" ></video>

控制器

var setupOpt = {
    'controls' : false,
    'autoplay' : false,
    'preload' : 'auto',
    // 'poster' : asset.thumbnail,
    'width' : 'auto',
    'height': 'auto'
};

//inject $sce to use any url, or fetch url from http request
var vidSrc = $sce.trustAsResourceUrl("example.mp4"); 

//create video js player dynamically
videojs( 'myVideo', setupOpt, function(){
   $scope.vid = videojs( 'myVideo' ).src([ {type: "video/mp4", src: vidSrc} ]);
});

//destroy video when $scope is destroyed
$scope.$on( '$destroy', function() {
    console.log( 'destroying video player' );
    $scope.vid.dispose();
});

这篇关于角度单页面应用程序，videoJS就绪功能仅在页面加载时触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！