Question

我正在使用图书馆video.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="file\undefined\1501667652598.mp4" type="video/mp4">
</video>

并添加了scripts / 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>标记，则需要通过调用function手动设置播放器。

原因是video.js会自动扫描您的HTML并设置任何现有的<video>代码，但不幸的是，当角色更新时，它无法观察HTML中的更改。（reference）

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

Answer 2

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

jQuery.noConflict();
        (function ($) {

       //your code

})(jQuery);

AngularJS Library仅在我刷新页面后才起作用，如果我改变状态它会停止工作

2 个答案: