search

videojs / video.js

Video.js - open source HTML5 video player
https://videojs.com
Other
37.97k stars 7.44k forks source link

posterImage.show() not working with version 5.0 #2661

Closed kukrik closed 8 years ago

kukrik commented 9 years ago

Very good news that came from the new version 5.0. I immediately tried to take advantage of a very dynamic player.

I used the following code with the version 4.12.13, which worked well. I tried the same code version 5.0, you posterImage.show () did not work :(. Here examples:

var player = videojs('#example_video_1', {}, function() {
          this.on('ended', function() {
              this.trigger('loadstart');
              this.posterImage.show(); //This place does not work
              this.exitFullscreen();
          });
      });

or (the differences are not)

videojs("example_video_1").ready(function() {
          var myPlayer = this;

         myPlayer.on('ended', function() {
             myPlayer.trigger('loadstart');
             myPlayer.posterImage.show();  //This place does not work
             myPlayer.exitFullscreen();
         });
      });

Can you suggest something, because this is my one project important! Thanks in advance!

lilchow commented 9 years ago

I had a very similar issue regarding this.bigPlayButton.show(). I had to resort to jQuery(this.bigPlayButton.contentEl()).show() to get it to work. Very strange.

chemoish commented 9 years ago

@kukrik is it acceptable to reset the video's state on end?

/* Hide the poster after the video has started playing */
.vjs-has-started .vjs-poster {
  display: none; }
this.on('ended', function () {
    this.hasStarted(false);
});
osanwe commented 9 years ago

@chemoish It works. Thanks.

kukrik commented 9 years ago

How? Examples of both of mine did not work! Send your complete code here to put??? Thanks in advance!

osanwe commented 9 years ago

Here is a JS code:

function initVideoPlayer() {
    console.log('initVideoPlayer()');

    document.createElement('video');
    document.createElement('audio');
    document.createElement('track');

    var jsonObject = xml2json.fromStr(XML_DATA);

    var video_setup = { 'controls': true,
                        'preload': 'auto',
                        'playbackRates': [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3],
                        'poster': getPosterUrl(jsonObject),
                        'plugins': {
                            videoJsResolutionSwitcher: {
                                default: 'low',
                                dynamicLabel: true
                            }
                        }}

    var video = videojs('video_player', video_setup, function () {
        console.log('[initVideoPlayer] Video player callback');
        var player = this;

        player.on('ended', function () {
            console.log('[initVideoPlayer] video ended listener');
            player.exitFullscreen();
            player.hasStarted(false);
        });

        player.updateSrc(getVideoUrls(jsonObject));
});

Here is an HTML code:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />

        <title></title>

        <link href="https://vjs.zencdn.net/5.0/video-js.css" rel="stylesheet" />
        <link href="css/videojs-resolution-switcher.css" rel="stylesheet" type="text/css" />
        <link href="css/videoplayer.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <video id="video_player" class="video-js vjs-default-skin vjs-big-play-centered"
               width='481' height='370'></video>

        <script type="text/javascript" src="https://vjs.zencdn.net/5.0/video.js"></script>
        <script type="text/javascript" src="js/videojs-resolution-switcher.js"></script>
        <script type="text/javascript" src="js/xml2json.js"></script>
        <script type="text/javascript" src="js/videoplayer.js"></script>
        <script type="text/javascript">initVideoPlayer();</script>
    </body>

</html>

Here is a CSS code:

@charset "utf-8";

.vjs-default-skin .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
    width: 5em;
}
kukrik commented 9 years ago

Thanks! I look and try to...

richardbushell commented 9 years ago

Rather than use: player.hasStarted(false); Is it better to directly use: player.handleTechLoadStart_();

This also seems to work, and we seem to avoid sometimes getting a constant spinning disc 'occasionally' when we then try to replay. Any thoughts on this?

kukrik commented 8 years ago

Thanks to @chemoish, I had a small mistake on the inside. It works well. A small example here:

var player = videojs('#example_video_1', {}, function() {

          this.on('ended', function() {
              player.exitFullscreen();
              player.hasStarted(false);
          });
      });

I can not comment on @richardbushell the proposed options "startplayer.handleTechLoadStart_();" . You are smart people :). I try, it works well, but it bothers me that each time flashing spinner, so as to re-launch the start etc...

Can I close the topic?

I have a few questions, I make new topics. Thanks to all!

richardbushell commented 8 years ago

Which version causes the flashing spinner?

A) player.hasStarted(false); we were getting the flashing spinner occasionally too, which is why we changed it to: B) player.handleTechLoadStart_(); this seemed to work better (no flashing spinner)

Also, it would be great if someone on the dev team could advise of the best/correct way to achieve poster at end with play graphic and replay without flashing spinner and no playback occasionally. Sort of a replay/reset option to go back to behavior when first opened.

Any definitive feedback on this?

kukrik commented 8 years ago

Option A is working for me. Spinner did not blink once and starts cleanly start.

Variant B flashes at times... At least for me. That is why it is better than other smart people know how to answer...

gkatsev commented 8 years ago

player.hasStarted(false) would be the recommended way. Not only is player.handleTechLoadStart_ "private" and so not recommended, it also triggers the loadstart event which can cause issues if triggered at the wrong time. Another option is to just remove the vjs-has-started class from the player manually. Hope those help.