1

尝试使用 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 就绪功能仅在第一次点击页面或重新加载页面时触发。第一次点击我的页面时，我在控制台中看到来自 scope.video.videoURL 的视频的 url，并且 DOM 正在使用 videoJS。如果我单击导航链接以加载不同的模板然后返回，则不会触发 videojs 就绪功能（即我在控制台日志中没有看到我的 videoURL，并且 DOM 没有被 videoJS 更改。我确实看到了 'linkFn ' 每次加载模板代码时在控制台中。我假设在我正在执行 console.log('linkFn') 的指令中，我可以在 videojs("myVideo") 对象上调用一些初始化代码，以便它操作DOM 正确，但我不知道那可能是什么。

非常感谢任何帮助。

4

2 回答 2

8

当您在单页应用程序中使用带角度的 videoJs 时，您需要在您的范围被销毁时手动销毁 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();
});
于 2015-04-14T22:24:25.080 回答
2

您在控制台中看到任何其他错误吗？该问题可能与播放器未正确处置的事实有关。

例如，参见这些讨论：

我不是角度专家，但是当您在视图之间来回切换时，播放器不会自动处理。

于 2013-09-14T10:51:40.650 回答