NOTICE: FORUMS MOVING

Thank you for visiting and participating in the Video.js forums. We are currently moving the forums to Stack Overflow and GitHub Issues. If you have a question or need help with Video.js, please post your question on Stack Overflow and add the tag 'video.js'. If you've found a specific bug in Video.js, please submit it in the issues tracker.

You can read more about this move on the blog.

VideoJS Player.init ignores data-setup attribute content? Broken video if "dom ready" event tries to use player.

neek's Avatar

neek

28 Feb, 2012 05:05 AM

Thought I'd raise this issue, if only to help others avoid this pitfall. I have a page with a <video data-setup="{ controls: true, autoplay: true}" ..blahblah> tag on it, which the videojs auto setup code is supposed to notice and auto-configure. A test page: http://www.premierrange.co.uk/test/videojs_ready_event_breaks_playe...

Changing video.js to have this code in Player.init fixes this problem:

// Set Options
_V_.merge(options, _V_.options); // Copy Global Defaults
_V_.merge(options, this.getVideoTagSettings()); // Override with Video Tag Options
/* BEGIN new code */
var dataSetupOptions = tag.getAttribute("data-setup");    
if (dataSetupOptions !== null) {
    dataSetupOptions = JSON.parse(dataSetupOptions || "{}");
_V_.merge(options, dataSetupOptions);
}
/* END new code */
_V_.merge(options, addOptions); // Override/extend with options from setup call

Long Winded Explanation

The video doesn't play because it has been initialised solely from the html5 <video> tag attributes, ignoring the data-setup attribute. I'll explain.

The setup code looks like this (from video.js):

var options, vid, player,
    vids = document.getElementsByTagName("video");

// Check if any media elements exist
if (vids && vids.length > 0) {

  for (var i=0,j=vids.length; i<j; i++) {
    vid = vids[i];

    // Check if element exists, has getAttribute func.
    // IE seems to consider typeof el.getAttribute == "object" instead of "function" like expected, at least when loading the player immediately.
    if (vid && vid.getAttribute) {

      // Make sure this player hasn't already been set up.
      if (vid.player === undefined) {
        // ** DO SETUP HERE

The final check for "vid.player" was causing me trouble. I found that my video was not being auto-setup, and was just freezing (in Chrome, trying to play the .mp4 version). I could do V('videoname').ready(function() { this.play(); }) just fine.. it would play.. but videojs hadn't set it up.

The reason is that vid.player was already assigned when the videojs startup code came to look at it. This was because I had this code in global scope:

dojo.ready(function() {
  dojo.query('[data-collapse-at-end]').forEach(function(node) {
    var v = _V_(node);
    if (v) {
      console.log("Found v: ", v);
      v.ready(function() {
        v.addEvent('ended', function() {
          console.log('ended!');
          dojo.wipeOut('clicknpickVideo').play();
        });
      })
    }
  })
})

This was an attempt to make the video auto-collapse when it finished playing. I just need to put data-collapse-at-end="1" on my video tags and they should magically have this new behaviour. However, this code is run before the videojs init code, I presume because of the rather inane _autoSetupTimeout() function using setTimeout(_V_.autoSetup, 1) which will always trigger after any "dom is ready" callbacks you may have set up.

The documentation at http://videojs.com/docs/api/ under "Referencing the Player" says you can do _V_("example_video_1") to get a handle to the player, BUT, if you're doing this before the autoSetup function has had a chance to run, the initialisation that happens in _V_.Player.init completely ignores your data-setup attribute. It will look for <video> tag attributes, and if there are none, give you a fairly broken video. It also assigns the player attribute, with:

tag.player = el.player = this;

Thus, the autoSetup code ignores this player.

So... is this essentially a bug? Surely we should assume that data-setup configuration is always honoured?

Cheers
Nick

  1. 2 Posted by neek on 05 Mar, 2012 08:25 AM

    neek's Avatar

    No response to this from the team?

    I've noticed that my test page is not online, sorry about that. It was on a branch in git that has since been swapped out .. I can re-instate it soon if need be. I'm a little depressed that there's been no interest in this issue.

    I've been chasing more 'ready' event trouble this morning, the timeout of '1' that the video.js script kicks off as soon as it loads to run autoSetup() just feels completely broken to me, it's not related in any way to the document 'ready' event and may fire several times while <video> tags on the page are still being evaluated by the browser.

    I think I'm going to have to run with a hacked version of video.js to remove this broken behaviour.

    Would you respond better if I forked on github? I have no fix to provide at present, I rely on the Dojo JS toolkit for my ready event handling, so my immediate fix isn't portable into videojs.

  2. 3 Posted by Roy on 06 Mar, 2012 04:48 AM

    Roy's Avatar

    Hi neek - not sure if my issue is related to what you're seeing as well...I just posted this... http://help.videojs.com/discussions/problems/1195-issues-with-data-...

  3. 4 Posted by neek on 06 Mar, 2012 11:13 AM

    neek's Avatar

    Roy, my problem was that I am using V to access (and, by side effect, initialise) the player before the videojs autoSetup() startup code has had a chance to run, and I'm highlighting the different code used in the two blocks of initialisation code. From your description, no, your problem is nothing to do with this, because you're not doing any special access of the player during page load, you're just allowing videojs to init the player normally.

  4. 5 Posted by Nick Gilbert on 22 Mar, 2012 04:39 PM

    Nick Gilbert's Avatar

    I'm getting this too.. not sure how to get round it at the moment.

  5. 6 Posted by dezzadk on 02 Jul, 2012 01:00 PM

    dezzadk's Avatar

    I'm astonished !

    I have the exact same issue.

    It makes the functionality pretty much useless. I either have to generate it all using JS or simply use VideoJS for embedding and no fancy parts like bullet-lists with links that goto timestamps with video etc. cause I will have to reference and re-init it !!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

 

17 Aug, 2014 12:53 AM
11 Aug, 2014 05:23 PM
09 Aug, 2014 05:59 AM
31 Jul, 2014 04:52 PM
31 Jul, 2014 11:35 AM
30 Jul, 2014 03:25 AM