AngularJS 库仅在我刷新页面后才能工作，如果我更改状态，它会停止工作

Question

我正在使用图书馆视频.js。我使用了网站上的示例代码：

<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="fileundefined1501667652598.mp4" type="video/mp4">
</video>

并添加了脚本/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>

当我直接刷新页面时，它工作正常。但是如果我更改状态，它会默认为常规视频播放器。我可能面临的问题是什么？

状态定义如下所示：

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

Answer 1

如果仅在页面加载完成后添加<video>标记，则需要通过调用播放器函数来手动设置播放器。

原因是video.js会自动扫描您的 HTML 并设置任何现有的<video>标签，但不幸的是，当 angular 更新它时，它无法监视 HTML 中的更改。(参考资料(

您可以在路由控制器中添加手动设置代码。

Answer 2

只需将您的代码放入其中：

jQuery.noConflict();
(function ($) {
//your code
})(jQuery);