Question

我现在面对的情况是我正常播放视频，但控件只是文本而不是应该出现的普通图标。我想知道我犯了什么错误。如果没有，有人可以告诉我是否有任何错误。

以下是我的代码库中的代码段：

我的index.html文件中导入的脚本：

<script src="lib/video.copy.js/dist/video.min.js"></script>
<script>
  videojs.options.flash.swf = "lib/video.copy.js/dist/video-js.swf"
</script>
<link href="lib/video.copy.js/dist/video-js.css" rel="stylesheet">

用于使用video.js播放视频的代码段：

$scope.specialtiesVideo = function (id) 
        {
            var element = id;
            console.log(id);
            console.log($scope.videos[id].$$unwrapTrustedValue())
            var srcfile = $scope.videos[id].$$unwrapTrustedValue();
            var webmfile = srcfile.substr(0, srcfile.lastIndexOf(".")) + ".webm";
            var mp4file = srcfile.substr(0, srcfile.lastIndexOf(".")) + ".mp4";
            var confirm = document.getElementById(id);
            console.log(document.getElementById(id));
            $scope.videoplayers[id] = videojs(id);
            console.log(document.getElementById(id));
            console.log("videojs enabled for the video identified by ID :"+id);
            if(isYT($scope.videos[id].$$unwrapTrustedValue()))
            {
                console.log("Youtube type videos");
                $scope.videoplayers[id].src(
                    [
                        {
                            type: "video/youtube",
                            src: $scope.videos[id].$$unwrapTrustedValue()
                        }
                    ]
                );
            }
            else
            {
                $scope.videoplayers[id].src(
                    [
                        {
                            type: "video/mp4",
                            src: mp4file
                        },
                        {
                            type: "video/webm",
                            src: webmfile
                        }
                    ]
                );
            }
            $scope.videoplayers[id].aspectRatio("16:9");
            $scope.videoplayers[id].autoplay(false);
            $scope.videoplayers[id].controls(true);
        };

但这是我得到的结果：

Oracle docs

我想知道我的代码是否正确调用了videojs文件，因为我没有看到videojs css文件中的任何css规则。

我也在显示video.js的文件结构，以防万一：

我还认为以下代码片段与此有关（如果我错了，请纠正我）：

@font-face {
  font-family: VideoJS;
  src: url("font/VideoJS.eot?#iefix") format("eot"), 
       url("font/VideoJS.woff") format("woff"),
       url("font/VideoJS.ttf") format("truetype"),
       url("font/VideoJS.svg#svgFontName") format('svg');
    }

请提前告知我如何解决这个问题

更正：正在使用Video-js.css文件，但上面提到的font-face代码段仍然不起作用。任何可以帮助以预期格式播放视频的解决方案都是受欢迎的

另外，我创建了一些css来自定义videojs元素，因为video-js.css文件中的样式规则似乎没有任何效果

自定义css代码：

.vjs-tech {
    /*height: 100%;*/
    height: 50px;
    z-index: -1;
}

.comment-container {
    z-index: 2 !important;
}

.docdetails {
    z-index: 3 !important;
}

.vjs-fluid {
    padding-top: 0% !important;
}

更新：嘿伙计们，我得到了解决方案。这很简单，我忘了把所需的类作为视频标签属性，没有它就不会调用video-js.css文件

这是解决问题的片段：

class="video-js vjs-default-skin vjs-big-play-centered"

videojs的视频控件显示为文本而不是图标

0 个答案: