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

when experimentalSvgIcons: true and the video don't start play can't see the play button #8336

Closed
R8KwEwN2hvrhY opened this issue Jul 1, 2023 · 2 comments · Fixed by #8337

Comments

@R8KwEwN2hvrhY
Copy link

R8KwEwN2hvrhY commented Jul 1, 2023

Description

use html like that

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

<video
    height="450px"
    width="720px"
    class="video-js vid1-dimensions vjs-controls-enabled vjs-workinghover vjs-v8 vjs-has-started vjs-user-inactive vjs-paused vjs-ended"
    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: true}},
        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"}])
  // In this context, `this` is the player that was created by Video.js.
  this.play();

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

the img
屏幕截图 2023-07-01 203320

and start play
屏幕截图 2023-07-01 203633

Reduced test case

none

Steps to reproduce

1.ready video
2.
3.

Errors

No response

What version of Video.js are you using?

8.5.0

Video.js plugins used.

No response

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

chrome 114

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

windows 11

@R8KwEwN2hvrhY R8KwEwN2hvrhY added the needs: triage This issue needs to be reviewed label Jul 1, 2023
@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:

amtins added a commit to amtins/video.js that referenced this issue Jul 2, 2023
Svg play icon is missing when player is initialized with class `vjs-has-started`.

- add `setIcon` to the `play-toggle` component constructor

Fixes videojs#8336
@amtins
Copy link
Contributor

amtins commented Jul 2, 2023

@friendtasy thank you for reporting this issue.

Until the patch is released, you can mitigate the problem as follows:

class PlayToggle extends videojs.getComponent('PlayToggle') {
  constructor(player, options) {
    super(player, options);

    this.setIcon('play');
  }
}

// replaces the standard component
videojs.registerComponent('PlayToggle', PlayToggle);

// player initialization
const player = videojs('player', {});

@amtins amtins added confirmed and removed needs: triage This issue needs to be reviewed labels Jul 2, 2023
mister-ben pushed a commit that referenced this issue Jul 4, 2023
Svg play icon is missing when player is initialized with class `vjs-has-started`.

- add `setIcon` to the `play-toggle` component constructor

Fixes #8336
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 4, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants