Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

the captions can't immediately change right position when zoomin full screen or PictureInPicture #8376

Open
R8KwEwN2hvrhY opened this issue Jul 25, 2023 · 8 comments
Labels
needs: reduced test case A reproducible test case is needed. See https://stackoverflow.com/help/minimal-reproducible-example needs: triage This issue needs to be reviewed

Comments

@R8KwEwN2hvrhY
Copy link

Description

the captions can't immediately change right position when zoomin full screen or PictureInPicture
1
2
3

Reduced test case

none

Steps to reproduce

  1. zoomin full screen or PictureInPicture

Errors

No response

What version of Video.js are you using?

8.5.1

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

115

What OS(es) and version(s) does this occur with?

windows11

@R8KwEwN2hvrhY R8KwEwN2hvrhY added the needs: triage This issue needs to be reviewed label Jul 25, 2023
@mister-ben
Copy link
Contributor

Have you got an example to look at. There might be a very brief delay before the text repositions/resizes, but are you saying your captions are staying there?

@R8KwEwN2hvrhY
Copy link
Author

Have you got an example to look at. There might be a very brief delay before the text repositions/resizes, but are you saying your captions are staying there?

when Next sentence will aright,but current sentence look not well position.

7.26.1.mp4

@R8KwEwN2hvrhY
Copy link
Author

i found that if dash include captions,current sentence will quickly move to the right position.
if use follow way add captions

                    var oldTracks = player.remoteTextTracks()
                    var k = oldTracks.length
                    while (k--) {
                      player.removeRemoteTextTrack(oldTracks[k])
                    }
                    var zhurl = {
                      kind: 'subtitles',
                      label: chs
                      src: ""
                      default: 'true',
                    };
                    player.addRemoteTextTrack(zhurl, true);

will something not right....

@mister-ben
Copy link
Contributor

Not seeing that here: https://codepen.io/mister-ben/full/poQQbBE?v=8.5.1
Can you make a reproducable test case?

@mister-ben mister-ben added the needs: reduced test case A reproducible test case is needed. See https://stackoverflow.com/help/minimal-reproducible-example label Jul 28, 2023
@R8KwEwN2hvrhY
Copy link
Author

R8KwEwN2hvrhY commented Jul 28, 2023

Not seeing that here: https://codepen.io/mister-ben/full/poQQbBE?v=8.5.1 Can you make a reproducable test case?

sorry,i don't know how to use it....

i use follow html ,you can change the src of video and captions

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.5.1/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.5.1/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.5.1/lang/zh-CN.min.js"></script>

<video
    height="450px"
    width="720px"
    class="video-js"
    id="my-player">

  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>

<script>
var options = {
        controlBar: {volumePanel: {inline: false}},
        muted: false,
        enableDocumentPictureInPicture: true,
        experimentalSvgIcons: true,
	controls : true,
	loop : false,
	language: 'zh-CN',
	errorDisplay: false,
	playbackRates: [0.5, 1, 1.5, 2,2.5,3],
	TitleBar: {'text':''},    
};

var player = videojs('my-player',options,function onPlayerReady() {
  videojs.log('Your player is ready!');
  //player.src([{src:"https://vjs.zencdn.net/v/oceans.mp4",type:"video/mp4"}])
  player.src([{src:"http://127.0.0.1:81/download/22.mp4",type:"video/mp4"}])
  // In this context, `this` is the player that was created by Video.js.

var oldTracks = player.remoteTextTracks()
var k = oldTracks.length
while (k--) {
  player.removeRemoteTextTrack(oldTracks[k])
}
var zhurl = {
  kind: 'subtitles',
  label: 'chs',
  src: "http://127.0.0.1:81/download/22.vtt",
  default: 'true',
};
player.addRemoteTextTrack(zhurl, true);


  this.play();

  // How about an event listener?
  this.on('ended', function() {
    videojs.log('Awww...over so soon?!');
  });
});
</script>

and follow is test video and captions
22.zip

@video-archivist-bot
Copy link

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

@R8KwEwN2hvrhY
Copy link
Author

ok,when update 8.6.1,it looks ok..........

@mister-ben
Copy link
Contributor

Good to hear, the change in #8442 must have resolved your issue too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs: reduced test case A reproducible test case is needed. See https://stackoverflow.com/help/minimal-reproducible-example needs: triage This issue needs to be reviewed
Projects
None yet
Development

No branches or pull requests

3 participants