Issues with Flash fallback

[bschaeffer]

Original issue #1:

Title: Poster doesn't show with flash only tech
Text: It never shows with the default skin and flash tech.

Original issue #2:

Title: Flash tech only just loops.
Text: The videos just loop.

Original issue #3:

Title: Flash fallback only works when it's the first and only tech
Text: Using a <video><source url=.. type=..></video> and initializing video js doesn't work with flash fallback.

{techOrder: ['html5', 'flash']} does not fall back to flash. {techOrder: ['flash']} does.

(Combined by @mmcc while we triage)

[mmcc]

If you think you've found a group of related issues about the flash fallback, let's talk through them in one issue before opening one for each thing. These seem like issues with implementation, so if you can point us to a reduced test case where you're seeing these, that would help debug. After that we can open any additional issues that make sense.

What version of Video.js are you using? What browsers? Any additional information like that would also be helpful.

[bschaeffer]

Okay... sorry I was just really frustrated at the time I posted them. Sorry for being really inconsiderate and rude about it.

Here's the embed code:

<video class="video-js vjs-default-skin" id="question-player" poster="screenshot.jpg">
  <source src="video.mp4" type="video/mp4" />
</video>

videojs "question-player", 
  techOrder: ['html5', 'flash']
  controls: false
  preload: 'auto'
  autoplay: false
  loop: false
  nativeControlsForTouch: false
  customControlsOnMobile: true

Using that code above, I get this message on Windows7/IE10:

Also, if I only use techOrder: ['flash'] with the default skin, the flash player works but the poster doesn't show up:

[mmcc]

No worries! I totally understand the frustration bit.

issue 1 - poster

Working example forcing Flash as the tech, and setting a poster (using the default skin).

issue 2 - looping

Same example as above, not able to reproduce a continuous loop.

Just to make sure this wasn't something weird with auto setup vs js initialization, I removed autosetup, and everything still functions as expected.

issue 3 - tech order

Here's a JSBin where I'm not forcing any tech order at all, but it's falling back to Flash whenever necessary (including Firefox on OS X and IE 8 in my VM).

The weirder thing here is that Windows 7 / IE 10 supports h.264, so the Flash fallback should not be necessary. How were the sources file encoded? Can we get a link to them?

Do you have a live example we can take a look at?

[mmcc]

Kept playing with the poster example and I was able to repro! Looks like the poster doesn't show up when Flash is used and controls are disabled.

[bschaeffer]

Just updated to 4.10 and, using flash as the main tech, was able to get the poster image up without any hacks.

Per IE10 supporting h.264 I was wondering about that too. Here's an example video to look at.

[mmcc]

Wait what? Do you have controls enabled now? Based on these culprit lines, the poster shouldn't show if controls are disabled and Flash is used because there is no underlying poster image to show as with HTML5 video.

I've got to run for now, but I'll take a look at the source file this afternoon.

[bschaeffer]

Okay, so that's a no. My posters are just snaps from first frame of my videos, so it looked like the poster image was being loaded with the update because previously when I used flash only tech the player was just black until I played the video. Now it's showing the the first frame of the video, but forcing another poster image doesn't work. So you're right it's doesn't show when controls are off.

Flash Fallback - Loaded up the bin for Issue 3 (http://jsbin.com/lozatusoki) in browserstack for Windows 7/IE 10 and ran across an interesting issue (it doesn't happen in IE 9, see this stackoverflow question:

Notice the different browser modes (compatibility vs standard):

[mmcc]

I opened up #1625 to address the poster issue.

Regarding the document mode bit, I'm using IE10 in standards mode and it's working fine. Looks like this is a known Browserstack issue.

[ryanwooten6]

I'm actually having a similar issue with the flash fallback. I can only play a mp4 video when I set flash as the first item in techOrder on Firefox. Any ideas or should I open up a new issue?

I had to look at the user agent and set the techOrder to flash when the browser is Firefox

[mmcc]

@ryanwooten6 We've pretty conclusively determined that the only actual issue here is with the poster image not showing for the Flash fallback. The old example seems to have gone away, so here's a new example of a video embed with just one source and no techOrder specified, and Firefox happily falls back to Flash.

[JellyWang]

Hi, would you mind posting the code for you "new example"? My Flash fallback won't work for IE8's emulation but your example works perfectly fine. I really want to figure out how to fix mine. The video won't play in IE8 and if I include the "data-setup" JSON, it crashes in IE8 emulation.

[mmcc]

@JellyWang You can just add /edit to the end of the url to see the code (or view source): http://jsbin.com/turoze/1/edit?html,output

[JellyWang]

@mmcc Thank you so much for replying this quick. I really appreciate that! I copied the exact same code from the url you provided to try it on IE8 emulation but it just couldn't play the video for some reason which is really weird. Then I copied this url: http://jsbin.com/turoze/1 and run it on IE8 emulation and the video plays. I believe those are the same code but I couldn't figure out why one would play on IE8 emulation and one wouldn't.

When I used video js 4.12, it crashed in IE8 emulation but when I used video js 4.11, it won't crash in IE8 emulation and I'm just kinda curious about how that happened.

Also, I noticed that even though I designed my own skin for video js, the "border-radius" is been override back to the default value while other things are working good. (my big play button should be a circle but in IE8 emulation, it became a square.)

I added videojs-ie8.min.js and videojs-ie8.js to my code but the video still can't be run on IE8 emulation. Whenever I click on the video, it won't load.

If you want to see my code, I have posted my problem on stack overflow as well:http://stackoverflow.com/questions/30639971/video-js-wont-play-video-on-ie8

[mmcc]

To be honest, we really try not to even touch bugs with emulation mode. It's simply too much of a rabbit hole full of dead ends and inconsistencies.

Regarding the border-radius question, that's a known issue. IE8 doesn't support it, so any time you use border-radius it's going to show up as just a square in IE8.

[JellyWang]

@mmcc Thanks a lot for taking time hleping me with my problem. I really appreciate that. So I actually solved by problem by adding this line of code:

    <script src="http://api.html5media.info/1.1.6/html5media.min.js"></script>

I'm using Flowplayer as a Flash fallback and now everything is working perfectly.
Video.js is by far the best video player! I'm glad problem is solved and I can keep using Video.js.

[mmcc]

Great! Glad to hear it. :)

[crviet92]

Execuse me! if i want to play video youtube in ie8 by videojs so how ?(English is bad,i'm sorry)

[mmcc]

@crviet92 This is a question for the videojs-youtube issue tracker.

[crviet92]

@mmcc
I have seen it but it don't show in ie8