Help with Javascript for html5 player

Regarding javascript help, I’m using the video.js player, this currently works:

<video id="_1200k.mp4" class="video-js vjs-default-skin"
preload="none" width="445" height="340" controls
poster="[var.thumb_file]" data-setup='{techOrder: [‘flash’,’html5’}'>
<source src="http://www...com/uploads/[var.video_play]" type='video/mp4' />
</video>

But, in IE8 that code also needs this flowplayer fallback code within the video tags:

<object class="vjs-flash-fallback" width="445" height="340" type="application/x-shockwave-flash"     data="https://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="/flowplayer/flowplayer-3.2.16.swf" />
<param name="flashvars" value='config={"playlist":["/[var.thumb_file]", {"url":     "http://../uploads/[var.video_play]","autoPlay":false,"autoBuffering":true}]}' />
<img src="[var.thumb_file]" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
</object>

However, it’s my understand that there’s no need for the flowplayer fall-back, because video.js has a fallback built-in. So, I’m trying to get rid of flowplayer, as a back-up.

In here: https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md
under “Alternative Setup for Dynamically Loaded HTML” it says to add this(somehow):

videojs("example_video_1", {}, function(){});

I’m just not sure where that would go. Any comments/insight you might have will be appreciated.

Hi,

The documentation you are referencing pertains to when your player is loaded dynamically (i.e. via Ajax). I’m not sure what this has to do with the problem at hand.

Wouldn’t it be easier to make a simple demo page using just video.js and verify that it works in IE8 (by means of a fallback) in which case you can remove all of your obsolete code.

Thanks for taking the time to reply to my posting. Much appreciated.
I have a web page with a static video available to play in the video.js player, and it plays there successfully. But that code alone, won’t play the dynamically searched and played videos, in the same PHP site. All the code above plays them successfully, however, I’m trying to do it without the flowplayer fallback, and just use the video-js fallback. Any additional help will be welcomed.

So you have static videos and dynamically loaded videos (by Ajax) and for each of these you want to remove the flowplayer fallback code for each type (static and dynamic). Did I get that right?

If so, can you provide a link to a demo page with one static video?

Thanks for your reply.
Yes, I have both. And the static videos work successfully, so there’s no need to link to them.
The dynamic one would require to be looked at off line, as I’d have to provide log in credentials.
In the meantime, I’ve tried to change the tags, without success(it just shows a black screen), to this:

<object class="video-js vjs-default-skin" width="445" height="340" type="application/x-shockwave-flash" data="/video-js-4.12.5/video-js/video-js.swf">
<param name="movie" value="/video-js-4.12.5/video-js/video-js.swf" />
</object>

Any ideas will be appreciated.

Lol. You’ve lost me.
You started off asking for help getting rid of the flow player code, but now you say:

Yet you still seem to be playing around with the flow player code.

Could you maybe rephrase your question?

Sorry, for any confusion. Yes, the static video:

source src="http://www…com/videos/test.mp4

plays in IE8 successfully without flowplayer.

The dynamic videos from:

source src="http://www...com/uploads/[var.video_play]

does not play without the code from my initial post. So, I’ve removed the flowplayer folder. And tried different scenarios like:

 <video id="_1200k.mp4" class="video-js vjs-default-skin"
 preload="none" width="445" height="340" controls
 poster="[var.thumb_file]" data-setup='{}'>
 <source src="http://www....com/uploads/[var.video_play]" type="video/mp4" /></source>

<object class="video-js vjs-default-skin" width="445" height="340" type="application/x-shockwave-flash" data="/video-js-4.12.5/video-js/video-js.swf">
  <param name="movie" value="/video-js-4.12.5/video-js/video-js.swf" />
 </object>
 </video>
<script>
 videojs("_1200k.mp4", {techOrder:["flash","html5"]}, function() {});
 </script>

without success in IE8. Any suggestions/solutions will be welcomed.

I don’t have any suggestions off the top of my head, I’m afraid.
I have used video.js, but mainly as a WP plugin, and the videos weren’t loaded dynamically.
That is not to say that we can’t sort this out, though.

Would it be possible for you to make a very simple page (for example without styling, where one video gets loaded dynamically), so that I can reproduce your issue.
It’s also fine to PM me a link if you don’t want to post it here.

I’ve heard from the video.js site that IE8 can be tricky to get working.
Efforts to get things working range from ensuring that you use the full URL to the video, to where someone only had success with IE8 after updating their flash player.

So, a first step is check if the videojs.com video is working in IE8. If you can’t get that going first, there’s little point progressing elsewhere until you can get IE8 working on their front page.

Hi Chris,

I had a look at the demo page, the link for which you sent me via PM.

Unfortunately, there are a lot of issues with the page. Try running it through the validator. I got 48 errors. Until you get those fixed, you cannot assume anything about IE8.

There are also a lot of scripts on that page so it is difficult to see what is happening where.
As the guy on the video.js GitHub page said, you really need to make a more concise demo which demonstrates the issue you are having.

That said, it seems that what you are trying to do is display videos (which are not actually being loaded dynamically) in a lightbox, using the video.js plugin (and its IE8 Flash fallback).

Here is how I would do that (using featherlight,js for the lightbox effect).
I got the idea of how to do this from an issue on the video.js GitHub page.

DEMO

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Video.js in a lightbox</title>
    <link type="text/css" rel="stylesheet" href="css/featherlight.min.css" />
    <style type="text/css">
      .lightbox, object{
        display: none;
        width: 634px;
        height: 270px;
      }

      .vjs-control-bar, .vjs-hidden{
        display: none;
      }
    </style>
  </head>
  <body>
    <a href="#" id="video-toggler">Open element in lightbox</a>
    <div id="video-lightbox" class="lightbox"></div>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="js/video.min.js"></script>
    <script src="js/featherlight.min.js"></script>

    <script>
      var player;
      $("#video-toggler").on("click", function(){
        $.featherlight('#video-lightbox', {
          afterContent: function (event) {
            $('.featherlight-inner').append(createPlayerDOM());
          },
          afterOpen: function (event) {
            player = videojs('#video-player', {"controls": true, "autoplay": true});
            $("video").attr("controls", true);
            $("vjs-cntrol-bar").hide();
          },
          beforeClose: function (event) {
            player.pause();
            player.dispose();
          }
        });
      });

      function createPlayerDOM() {
        var playerContainer, playerDOM;
        playerContainer = document.createElement('div');
        playerDOM = document.createElement('video');
        playerDOM.id = 'video-player';
        var video_mp4 = document.createElement('source');
        video_mp4.setAttribute('src', 'http://video-js.zencoder.com/oceans-clip.mp4');
        video_mp4.setAttribute('type', 'video/mp4');
        var video_webm = document.createElement('source');
        video_webm.setAttribute('src', 'http://video-js.zencoder.com/oceans-clip.webm');
        video_webm.setAttribute('type', 'video/webm');
        var video_ogg = document.createElement('source');
        video_webm.setAttribute('src', 'http://video-js.zencoder.com/oceans-clip.ogv');
        video_webm.setAttribute('type', 'video/ogg');
        playerDOM.appendChild(video_mp4);
        playerDOM.appendChild(video_webm);
        playerDOM.appendChild(video_ogg);
        playerContainer.appendChild(playerDOM);
        return playerContainer;
      }
    </script>
  </body>
</html>

This works as expected in IE8.

I hope that helps somewhat.

Thanks for your replies

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.