角度单页面应用程序,videoJS就绪功能仅在页面加载时触发

Question

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

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正确,但我无法弄清楚它可能是什么.

任何帮助非常感谢.

Answer 1

当您在单页应用程序中使用带有角度的videoJ时,您需要在销毁范围时(当您远离创建播放器的状态时)手动销毁videojs播放器,并在再次创建时重新加载它.

就绪状态不会再次触发,因为当您向后导航时,videojs播放器在技术上已经创建,只是您的$ scope无法跟踪它.

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

有用的链接

(动态创建一个玩家)

https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md#alternative-setup-for-dynamically-loaded-html

(以角度指令处置玩家)

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();
});