希望不要把video元素挪到ASS-container里边去

ZjzMisaka commented 3 years ago

init.js中把video元素挪到ASS-container里边去了, 导致实际页面中我的播放器没有高度, 详见下面的代码

  if (!this._.hasInitContainer) {
    const isPlaying = !video.paused;
    video.parentNode.insertBefore(this.container, video);
    this.container.appendChild(video);
    if (isPlaying && video.paused) {
      video.play();
    }
  }

我把它改成下面这样就恢复了正常

    if (!this._.hasInitContainer) {
      var isPlaying = !video.paused;
      // change start
      video.parentNode.append(this.container);
      // this.container.appendChild(video);
      // change end
      if (isPlaying && video.paused) {
        video.play();
      }
    }

修改后的含有字幕的播放页可以参考字幕视频之前这样做是出于什么考量么?

weizhenye commented 3 years ago

在 new 的时候明确传一个 container 你就可以自由发挥了。

ZjzMisaka commented 3 years ago

在 new 的时候明确传一个 container 你就可以自由发挥了。就是因为指定了container不能解决问题, 所以才建议开放自行决定是否保持原有的元素的层级. 有的时候播放器使用了其他库, 各种地方写死了, 不是很能配合你的设计去做修改, 反而会出问题.

weizhenye commented 3 years ago

当不传 container，仅指定 video 元素时，为了能够在 video 上显示字幕，保证样式正确，需要由 ASS.js 库生成一个 container，并把 video 放到 container 里控制样式，否则 container 和 video 并列是没法保证字幕出现在 video 上的。

当传了 container，ASS.js 库不会去修改 DOM 结构，不会去处理 container 和 video 的位置关系，完全由开发者自行处理，不管是集成什么播放器库，container 的位置和样式都是开发者定的，想要什么效果就什么效果。

我不清楚你说的传 container 达不到效果是什么情况，你最开始附上的代码片段也写明了 if (!this._.hasInitContainer) 初始化没有传 container 才会执行修改 DOM 结构的逻辑。

ZjzMisaka commented 3 years ago

这就不是很清楚了, 我调试的时候断点确实跑进去了, video元素也确实挪了位置了. 我代码中确实是传了container的, 可以看下边代码.

fetch(assSrc)
.then(function(response) {
    if (!response.ok) {
        $(player.getControlItem('subtitle').el).addClass("ctrl-btn-not-active");
        ass = null;
    } else {
        fetch(assSrc)
        .then(res => res.text())
        .then((text) => {
            ass = new ASS(text, document.getElementById('video-player'), {
              // Subtitles will display in the container.
              // The container will be created automatically if it's not provided.

              // 设置container /////////////////////////////////////////////
              container: document.getElementById('nplayer_subtitle_screen'),

              // see resampling API below
              resampling: 'video_width',
            });
            $(player.getControlItem('subtitle').el).css("pointer-events", "all");
            ass.hide();
        });
    }
});

应该没错吧, 但video确实挪了位置了. 具体原因我也不清楚, 总之通过改代码解决了. 按你的说法的话, 我这应该是个例吧, 影响不是很大, 总之谢谢解答

weizhenye / ASS

希望不要把video元素挪到ASS-container里边去 #30