视频 js 齿轮图标对于质量选择不可见

编程问答 2022-05-02

问题描述

我正在尝试展示质量选择的齿轮
我使用 videojs 和 videojs-quality-selector
视频可以运行但没有选择质量的齿轮
帮我解决这些问题，谢谢。

html 代码：

<head>
<link href="plugins/css/video-js.min.css" rel="stylesheet" />
<link href="https://unpkg.com/@silvermine/videojs-quality-selector/dist/css/quality-selector.css" rel="stylesheet">
</head>

 <video id="video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
        <source src="" type="video/mp4">
 </video>

<script type="text/javascript" src="plugins/js/video.min.js"></script>
<script src="https://unpkg.com/@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>

js 代码：

var options,player;

options = {
    controlBar: {
        children: [
            'playToggle','progressControl','volumePanel','qualitySelector','fullscreenToggle',],},};

player = videojs('video_1',options);

player.src([{
        src: 'video1.mp4',type: 'video/mp4',label: '720P',{
        src: 'video2.mp4',label: '480P',selected: true,{
        src: 'video3.mp4',label: '360P',]);

解决方法

这几乎可以肯定是因为您尝试初始化播放器两次：

  • 一次使用 data-setup='{}' 属性，没有选项
  • 使用 videojs('video_1',options) 一次，设置选项包括插件。

如果插件已经初始化（使用 data-setup），调用 videojs('video_1',options) 只会返回现有播放器，而不是使用请求的选项重新初始化它。

最简单的解决方案就是删除 data-setup='{}'。

html5-videojavascriptvideovideovideo.js