empty player spins forever on play

[bcjwilson]

If you create an empty video player (a player with no content) then when the viewer hits play, it just spins forever.

Example code:

  <video
    id="examplePlayer"
    class="video-js vjs-default-skin"
    width="640"
    height="264"
    poster="http://video-js.zencoder.com/oceans-clip.png"
    controls>
    <!-- no sources -->
  </video>

<script>
videojs('examplePlayer');
</script>

It does log a Video Error event to the console, but the user sees only a spinner.

What should the player do in this case?

[heff]

It seems like this line should be killed. We're currently relying on the spinner to show errors to the end-user, which is kind of lame. It should replaced by a more appropriate end-user error message though.

In your use case would a visible error message at this point be a problem?

[bcjwilson]

It's a tough question. Now that you explain, it makes a lot of sense.

A spinner communicates to the user "hold on, I'm trying to do something, eventually good stuff will happen." In this case, it'll never get better, so the spinner is a bit misleading.

Other choices I can think of:

• show an exclamation point, or a can't play icon (like native iOS controls do - a play button with a line through it)
• show a real actual error message (requires localization).
• (crazy) play a video of static

Since nothing else in vjs core currently requires localization, I'd lean away from the second option. What do you think?

[bcjwilson]

I talked to @BCjwhisenant — he liked the "can't play" overlay button idea.

[heff]

(crazy) play a video of static

lol, awesome

Yeah, the can't play icon totally makes sense. @mmcc, is there an icon in the font set we can use for that?

[gkatsev]

(crazy) play a video of static

I support this choice. Bring back my childhood of tv channels not working.

[sawyerr44]

In my particular case I would like to allow content authors to have the option to only select an image. With this option there is a chance that no videos will be selected. If this is the case, the ideal solution would load the spinner initially, check for video tags, if there are none then hide the spinner, display a message (optional) and revert back to the poster image.

[heff]

@sawyerr44 So in your case an image could be the actual content, with no audio? By 'check for video tags' do you mean video source tags (<source>) specifically?

[sawyerr44]

@heff Yes, if no video is defined (using the source tag), the poster would become the default content without any sound. In my scenario I would like to give the author the choice of using a poster (mandatory) with or without a video. At the moment, videojs works great if you have a poster and a video. If you only have a poster, the spinner icon is rendered continuously and an error is logged.

[heff]

@sawyerr44 Ok, got it. That's not exactly an intended use case for Video.js. The poster is meant to augment the content, not be the content itself. So I don't think we should complicate the poster/spinner stories with that requirement. The best way to approach that would be to create an image tech, like the Flash/HTML5 techs, that would allow you to use an image as the source. e.g. <source src="myImage.jpg" type="image/jpeg">.

That's probably worth opening another issue about supporting images as content, and I'd be interested to hear more about the situation where that's valuable over just just using and image tag.

[mmcc]

I really think the logic for deciding what to show should be handled before a video element is even created. You mentioned authors will have the option of selecting just an image, so when your page loads just do a check like this:

if (content.hasVideo) {
  // Set up a <video> element
} else {
  // Just an IMG tag
}

This is total pseudo code since I don't know what your architecture looks like, but this is how I would handle it. Preferably something like this would happen in a template before even rendering the view, but you could also handle the logic in JS.

EDIT: Woops, thought @sawyerr44's was the original issue when I closed this. @sawyerr44: This answer is specific to your use case, but for more specific answers on this you might want to try StackOverflow.

[mmcc]

In regards to the icon, my thought would be to do both an exclamation icon and make it clear the buttons are no longer going to work. Maybe add one of these exclamation icons:

Then overlay something like this on top of the play button as well as disable pointers and such for controls.

[heff]

Created #869 to address this and other no-source issues

[mmcc]

Since @heff opened another issue to address this, I'm going to close this one as a dupe.

[heff]

This issue should be fixed now as of #1197