Issue with the flash fallback of VideoJs with Firefox

问题

I have try to add videoJs to my site to play MP4 files, all works perfectly in Chrome but when I go to Firefox (which doesn't support MP4 files) the flash player stay on a black screen and buttons do nothing.

Simple question: why? I don't understand, websites like vine.co or instagram use videoJs with no issue but for me this is not the case.

So I tried to change the tech order, now Flash always try to read the video but even on chrome nothing append.

This is my test code:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>

    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    <script src="http://vjs.zencdn.net/4.0/video.js"></script>
    <script>
      videojs.options.flash.swf = "video-js.swf"
    </script>
</head>
<body>
    <video id="video" src="http://domain.com/flash/video.mp4" control></video>
    <script type="text/javascript">
        jQuery(function() {
            var player = videojs('video', {"controls": true, "autoplay": false, "preload": "auto", "techOrder": ["flash", "html5"]});
            console.log(player);
        });
    </script>
</body>
</html>

All the files (the swf player, the MP4 video, and the html file) are in the same folder named 'flash'.

Can you help me?

回答1:

A few things to try here:

Make sure you're loading the video-js css file.
Add the "video-js" and skin classes to your video object as described here (also, it is "controls", not "control"): https://github.com/videojs/video.js/blob/0020ba15b9ae2b60e51d4d8d2751ffa31d18694d/docs/guides/setup.md
If you're loading video js from the CDN, you don't need to set the flash.swf option. That may be causing an issue as well.

You shouldn't need to set the techOrder to get Firefox to behave, and you definitely don't need a corresponding video file for each type of "Tech". Flash will play the fallback in mp4 as long as it's above version 9 or so.

I did run into an issue on Firefox where the Flash fallback would play the video but the video would be blank (audio would play) when I included a "ready" event. I was able to get around this by firing a blur event on the $(this) object. That may be helpful to you if you need to use ready.

回答2:

You need a flv Version of your Video when you want to deliver it through flash. It could be usefull to offer another webm Version of your Video. This should bei played in Firefox and Chrome.

For every Tech you need the correspondenting videofile.

来源：https://stackoverflow.com/questions/17644444/issue-with-the-flash-fallback-of-videojs-with-firefox

标签

javascript

html

flash

video

video.js