Video.js does not display transcoded files, only source

Jorrit, I am grateful that you are looking in to Video 7 issues. Thank you for so much help!

I use FFmpeg and, if I understand your question, I transcode into Drupal's default public file system. I will probably use the private file system later on but I want to keep things as simple as possible while testing. When everything starts to work well I plan to use some brand of CDN to distribute a lot of content, so I'm happy to see others post support requests for Storage API, et al.

Anyway, I use CENTOS 5.7 x86_64 kvm, and my version of FFmpeg is:

ffmpeg version git-2012-02-19-04f7eee Copyright (c) 2000-2012 the FFmpeg developers
  built on Feb 20 2012 15:16:07 with gcc 4.1.2 20080704 (Red Hat 4.1.2-51)

Of course...

Just to clarify, all my testing nodes have only one source element. I tried to add a duplicate video field with different settings in an old sandbox but it didn't work at all. Generally, the only thing that I've changed up to now is the number and type of transcoded videos that are based on the source that is uploaded. But now that you've helped me to get all my videos to transcode properly, I can move on to other parties. :)

Also, of the several sandboxes that I created for the Video module, http://video8.mkdev.org is the only sandbox with Video.js enabled.

*

So to get back to the point, I created two pages that I think you'll be interested in:

http://video8.mkdev.org/node/14 has a 150MB source file that Video.js tries to use, even though mov is NOT enabled for this file extension in /admin/config/media/video/players.

http://video8.mkdev.org/node/13 has a m4v source file. Video.js is NOT enabled for this file extension in /admin/config/media/video/players, and Video.js does not try to display anything, which is what I would expect.

Attached is a screen capture of what I see immediately after I click submit, even though drush cron is responsible for the transcoding job. You can see the first frame for the source video, which I believe is handled by the browser under the protocol for HTML5. But in theory I shouldn't see anything appear in the node until the job is done and the videos are ready to display.

Incidentally, throughout all my testing with the Video module, I have never seen any video displayed with the Video for everybody option set for the HTML5 Player in /admin/config/media/video/players.

Finally, I get this error for type: video_conversion for three out of four of the transcoding jobs (which you are addressing in a different thread):

We could not determine the height and width of the video

I suspect the exception is flv, possibly because of FLVTool2.

Sure, http://video8.mkdev.org/user/register

Thanks for pointing out that Video.js is NOT intended for the display type in /admin/structure/types/manage/video/display. (Also, when I tested the display setting I was not able to transcode into other formats in the first place.)

As you say, transcoded files are loading now in my site, but new issues have emerged. Once I build another fresh sandbox with your latest dev I will verify them, but this is what I'm seeing now:

• some, but not all, of the transcoded files are loading; specifically ogg and mp4 are missing from the HTML page
• the order of the transcoded files is alphabetical, which is incorrect (this appears to match the preset page)
• order should be mp4 first (because of Apple devices and webkit), then webm, ogv, flv
• after changing the display type, newly transcoded files are not playing properly (especially mp4)
• Video.js display functionality is erratic in iPhone

Again, I will have to test again and submit a more accurate issue when I have the time to build a fresh site.

Regarding format order, I have read about the importance this in a few references. Here are three.

1) An attached excerpt from "The Definitive Guide to HTML5 Video" by Silvia Pfeiffer (p24)

2) The videos.com site has a different interface now, but he used to have a code builder function that used the same order. Right now code references are minimal, but this snippet puts mp4 on top:

<video id="my_video_1" class="video-js vjs-default-skin" controls
  preload="auto" width="640" height="264" poster="my_video_poster.png"
  data-setup="{}">
  <source src="my_video.mp4" type='video/mp4'>
  <source src="my_video.webm" type='video/webm'>
</video>

3) http://camendesign.com/code/video_for_everybody

* * *

Regarding URLs that show these problems on my site, here are three. (BTW, clearly I am doing the flash fallback incorrectly, since the flv code is not separated from the other formats.)

http://video8.mkdev.org/node/19 - This node was created yesterday with mp4, webm, ogg, and flv selected, using a m4v file for the upload where only fly and webm are showing:

<video id="video-151-video" data-setup="{}" class="video-js vjs-default-skin" width="640" height="360" controls="controls" preload="auto" poster="http://video8.mkdev.org/sites/default/files/videos/thumbnails/151/thumbnail-151_0002.png">
  <source src="http://video8.mkdev.org/sites/default/files/videos/converted/151/videoTest-480p-16x9-m4v-1_flv_1330122630.flv" type="video/flv" />
  <source src="http://video8.mkdev.org/sites/default/files/videos/converted/151/videoTest-480p-16x9-m4v-1_webm_1330122647.webm" type="video/webm" />
</video>

http://video8.mkdev.org/node/18 - This is a node created after the display change that doesn't play any video, only audio. Only mp4 and webm are showing:

<video id="video-143-video" data-setup="{}" class="video-js vjs-default-skin" width="640" height="360" controls="controls" preload="auto" poster="http://video8.mkdev.org/sites/default/files/videos/thumbnails/143/thumbnail-143_0004.png">
  <source src="http://video8.mkdev.org/sites/default/files/videos/converted/143/videoTest-480p-16x9-DVCPRO50-5b_mp4_1329932789.mp4" type="video/mp4" />
  <source src="http://video8.mkdev.org/sites/default/files/videos/converted/143/videoTest-480p-16x9-DVCPRO50-5b_webm_1329932794.webm" type="video/webm" />
</video>

http://video8.mkdev.org/node/13 - This video plays on iPhone and shows the most formats in the source, and was created before the display change:

<video id="video-97-video" data-setup="{}" class="video-js vjs-default-skin" width="640" height="360" controls="controls" preload="auto" poster="http://video8.mkdev.org/sites/default/files/videos/thumbnails/97/thumbnail-97_0003.png">
  <source src="http://video8.mkdev.org/sites/default/files/videos/converted/97/videoTest-480p-16x9-m4v-1_flv_1329854948.flv" type="video/flv" />
  <source src="http://video8.mkdev.org/sites/default/files/videos/converted/97/videoTest-480p-16x9-m4v-1_mp4_1329854951.mp4" type="video/mp4" />
  <source src="http://video8.mkdev.org/sites/default/files/videos/converted/97/videoTest-480p-16x9-m4v-1_webm_1329854966.webm" type="video/webm" />
</video>

Thanks for sticking with this issue, Jorrit. I am going to test with tomorrow's dev versions of this and the latest Video module, but I want to quickly address your points:

Thanks for your extensive reply. First of all, MP4 should be first for the iPad. However, I think Video.js already fixes this. When I look at the HTML source after Video.js has run, there are no source elements anymore.

I'm not sure what you mean by "there are no source elements anymore." I am trying to differentiate between the source files (i.e., a mov file or something else that is uploaded to be transcoded), and the src elements in the HTML pages, which are the transcoded files in /videos/converted/x. I am still baffled why some of these transcoded files are missing. There should be four but there are only two. Also, there are always the uploaded source files in the /videos/original directory.

With Video.js, flv is just a element of the element. The Video.js module builds the Flash fallback using any mp4 or flv files it finds in the sources.

I understand that flv becomes one of the transcoded file formats, but I don't see how it gets used as the flash fallback by the browser. I thought that there is supposed to be specific code that is required for older browsers or IE that is used below the section with multiple transcoded src elements. And, if I understand you correctly, you are saying that the flash fallback is a flash-based player (or wrapper) for either a flash file or an mp4 file.

I looked at the URLs you provided, but I can't really investigate the problem if I can't take a look in the database. Is it possible for me to receive a login to the database of just this test installation?

I am happy to provide you with anything you need for troubleshooting, including installing additional modules. You have admin access to this instance, so you could download any of the backups if you wish. In the meantime, however, like I said I will be building a site with the new version of the Video-dev and testing again so perhaps this will solve some of these issues.

Thank you again. Your quick response with this and so many other issues is deeply appreciated. The next stable release of these modules are going to rock the house. :)

Thanks for the clarification about how flv fallback works in Video.js.

Regarding the devel module, I actually had not installed it for any of these sandboxes, but it is now enabled for you on video8. I also installed the schema module, just in case you want to test with that one, too, but I will leave it to you to enable it if you wish.

I will now test with the latest dev versions of Video and Video.js to see if these issues persist.

OK, I built a clean sandbox with the Video module version 7.x-2.4+45-dev (February 28, 2012 - 16:44), and the Video.js module version 7.x-2.0-rc2+2-dev (February 26, 2012 - 16:43).

http://video9.mkdev.org/node/1

The good news is that the thumbnails are building as intended from beginning to end. Nice.

The bad news is that there are no transcoded files built into the html page, even though there are four transcoded files in the /converted directory -- nor is there a poster image -- so there is nothing for the browser to display.

Here is the html source (with a little extra for context):

...
    <div id="content" class="column"><div class="section">
            <a id="main-content"></a>
                    <h1 class="title" id="page-title">
          test upload from m4v to four formats        </h1>
                          <div class="tabs">
                  </div>
                          <div class="region region-content">
    <div id="block-system-main" class="block block-system">

    
  <div class="content">
    <div id="node-1" class="node node-video node-promoted node-full clearfix" about="/node/1" typeof="sioc:Item foaf:Document">

      
  
  <div class="content clearfix">
    <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Transcoding to mp4, webm, ogv, and flv (can't see any way to do ogv right now so I'm forced to use ogg. </p>
<p>Also testing thumbnail build to see if it reaches the end of the file the way it should, instead of the first 15 seconds.</p>
</div></div></div>  </div>

  
  
</div>
  </div>
</div>
  </div>
      
    </div></div> <!-- /.section, /#content -->

    
  </div></div> <!-- /#main, /#main-wrapper -->

...

Thanks for taking a look. Please let me know if you'd like to take a look at this site as you did for video8:

http://video9.mkdev.org/user/register

I activated your account. Let me know if you'd like me to update the modules (which I'll be able to do in another 15 hrs). Feel free to turn on, install, or tweak anything you need. Currently Devel and Schema are available but not enabled.

Oh geez, I probably didn't click the save button. Sorry I was extremely tired when I set it up.

Thanks for working on that ogg bug you found. I see that the other three formats I created are loading alphabetically the in the html code, but the poster frame is missing.

I'm not sure about the nature of the ogg bug, but is there any chance the Video module could force the wrapper/extension to read .ogv instead of .ogg? My understanding is that ogv should be for video and the browser is expecting that, whereas ogg is typically for audio, even though it still works for video. The Video module's preset drop down shows "Ogg format" (based on the user's copy of FFmpeg), but I know my build of FFmpeg is capable of transcoding properly with the correct default AV codecs to the ogv extension with "ffmpeg -i source.mov output.ogv"

Oh good to know that's the same one.

If it's a Drupal MIME type issue that does not source FFmpeg's list of extensions, would adding a declaration in the .htaccess file for ogv do any good?

AddType video/ogg .ogv

I can't disable or uninstall the Video module normally and will submit a separate bug report for easier bug searches.

Since deleting and inserting a newer video module is likely to break the site, which was the case previously, I will go ahead and build a video10 to test the current dev for Video and Video.js. Let me know how you want to handle video8 and video9.

The ogv fix works on video10. Great job, Jorrit.

There seems to be an issue with the default display settings in /admin/structure/types/manage/video/display, as we saw previously. Leaving the default settings untouched produced no display with video player showing by default, whereas toggling the display to <hidden> and back to video player again, then re-saving, produces a functional display.

Here is the code before re-saving:

  <div class="content clearfix">
    <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>This test should show all three transcoded videos in the html source: mp4, webm, and ogv. (flv is not yet created as a preset.)</p>

</div></div></div>  </div>

And here is the code after re-saving:

  <div class="content clearfix">
    <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>This test should show all three transcoded videos in the html source: mp4, webm, and ogv. (flv is not yet created as a preset.)</p>

</div></div></div><div class="field field-name-field-video field-type-video field-label-above"><div class="field-label">Video:&nbsp;</div><div class="field-items"><div class="field-item even"><video id="video-1-video" data-setup="{}" class="video-js vjs-default-skin" width="853" height="480" controls="controls" preload="auto" poster="http://video10.mkdev.org/sites/default/files/videos/thumbnails/1/thumbnail-1_0001.png">
  <source src="http://video10.mkdev.org/sites/default/files/videos/converted/1/videoTest-480p-16x9-DVCPRO50-1_mp4_1330755032.mp4" type="video/mp4" />
  <source src="http://video10.mkdev.org/sites/default/files/videos/converted/1/videoTest-480p-16x9-DVCPRO50-1_ogv_1330755038.ogv" type="video/ogg" />
  <source src="http://video10.mkdev.org/sites/default/files/videos/converted/1/videoTest-480p-16x9-DVCPRO50-1_webm_1330755050.webm" type="video/webm" />
</video>
</div></div></div>  </div>

I ran another test with more presets to include ogg, m4v, and flv. The ogg file is discarded, even though it shows up in the /converted directory, which is good. Here is what shows up in the html file:

<div class="field-label">Video:&nbsp;</div><div class="field-items"><div class="field-item even"><video id="video-10-video" data-setup="{}" class="video-js vjs-default-skin" width="853" height="480" controls="controls" preload="auto" poster="http://video10.mkdev.org/sites/default/files/videos/thumbnails/10/thumbnail-10_0002.png">
  <source src="http://video10.mkdev.org/sites/default/files/videos/converted/10/videoTest-480p-16x9-DVCPRO50-2_flv_1330756949.flv" type="video/flv" />
  <source src="http://video10.mkdev.org/sites/default/files/videos/converted/10/videoTest-480p-16x9-DVCPRO50-2_m4v_1330756953.m4v" type="video/mp4" />
  <source src="http://video10.mkdev.org/sites/default/files/videos/converted/10/videoTest-480p-16x9-DVCPRO50-2_mp4_1330756958.mp4" type="video/mp4" />
  <source src="http://video10.mkdev.org/sites/default/files/videos/converted/10/videoTest-480p-16x9-DVCPRO50-2_ogv_1330756975.ogv" type="video/ogg" />
  <source src="http://video10.mkdev.org/sites/default/files/videos/converted/10/videoTest-480p-16x9-DVCPRO50-2_webm_1330756987.webm" type="video/webm" />
</video>

For what it's worth, it took exactly :50 seconds for my server to transcode from the uploaded 150MB source file into these six formats at their defaults. Sweet.

Also, the ogv and flv defaults are very poor quality next to mp4/m4v and runner up, webm. The mp4 files are extremely crisp while the flv file is surprisingly heavier with a major loss of quality. Ogv has the poorest quality, and webm actually shows up with smaller files than ogv. Surely this is related to FFmpeg's defaults, but perhaps there is a way for the Video module to take this into account and help the user to synchronize the quality a bit more with advice about what settings to choose for what formats.

Regarding #27: I have had errors in the past with this module by upgrading this way. (Also see http://drupal.org/node/1465940#comment-5683636)

But yes I have since upgraded and it appears to work ok. The only problem now is that the m4v file type is missing in html on video8 (I have not upgraded video9). I know that file type works because I think you fixed something for it recently, and it shows up properly in video10.

Here is my output with a successful update script:

# drush dl video-7.x-2.x-dev
Install location /sites/all/modules/video already exists. Do you want to overwrite it? (y/n): y
Project video (7.x-2.x-dev) downloaded to /sites/all/modules/video.                      [success]
Project video contains 2 modules: video_ui, video.
#
#
#
# drush -v up
Initialized Drupal 7.12 root directory at /                     [notice]
Initialized Drupal site default at sites/default                                              [notice]
Executing: wget --version
Initialized Drupal 7.12 root directory at /                     [notice]
Initialized Drupal site default at sites/default                                              [notice]
Command dispatch complete                                                                     [notice]
Update information last refreshed: Sat, 03/03/2012 - 06:43

Update status information on all installed and enabled Drupal projects:
 Name                   Installed version  Proposed version  Status                                   
 Administration menu    7.x-3.0-rc1        7.x-3.0-rc1       Up to date                               
 Backup and Migrate     7.x-2.2            7.x-2.2           Up to date                               
 Drupal core            7.12               7.12              Up to date                               
 Libraries API          7.x-1.0            7.x-1.0           Up to date                               
 Video                  7.x-2.4+50-dev     7.x-2.4           Up to date                               
 Video.js (HTML5 Video  7.x-2.0-rc2        7.x-2.0-rc2       Up to date                               
 Player)                                                                                              
#
#
#
# drush -v updb
Initialized Drupal 7.12 root directory at /                     [notice]
Initialized Drupal site default at sites/default                                              [notice]
The following updates are pending:

video module : 
  7205 -   Fix problems with Ogg and WebM videos    Change videos with file type audioogg to videoogg  Change .webm videos from applicationoctet-stream to videowebm  If using FFmpeg, update all presets to use ogv as extension instead of ogg. 

Do you wish to run all pending updates? (y/n): y
Initialized Drupal 7.12 root directory at /                     [notice]
Initialized Drupal site default at sites/default                                              [notice]
Executing video_update_7205                                                                   [notice]
Command dispatch complete                                                                     [notice]
Finished performing updates.                                                               [ok]
Command dispatch complete                                                                     [notice]

Regarding #28: Thanks for the fix in http://drupal.org/node/1466126.

Regarding #29: Yes video/ogg is present in the HTML. Just to clarify, I did a test for both extensions by creating two presets, one for ogv (normal) and one for ogg (should not be used for video). Your fix is perfect because it allows the custom preset to function in order to build the .ogg file, while excluding it from the HTML build. So it is correct to show the .ogv file and not the .ogg file.

Regarding #30: Indeed, this requires a lot of trial and error and is not critical to address now, I just thought I'd mention it since there are radical differences in quality and file size when using the defaults.

Thanks for checking in about this. Unfortunately, I still can't get Video.js to display properly, but now that the transcodes are basically working and showing up in the HTML, I suppose particular issue is resolved.

Currently, I can't get mp4 files to play properly in Safari. Only audio works. This was after you had fixed many bugs that allowed me to get Video and Video.js to work well enough for me to upload and transcode videos for display in all browsers. Most of those files that were working do not work now. I also have problems with aspect ratio consistency for the same file among browsers, so the poster image is distorted and the player controls extend beyond the file's dimensions.

The strange audio-only behavior started happening March 5, as if a switch were thrown. I was posting tests to my sandbox and had not done any kind of updates, but suddenly the problems started. This also corresponded to another issue (http://drupal.org/node/1468538), which made me think it was some kind of issue with calls to the video.js vendor outside of Drupal.

Ok, I installed another new sandbox with fresh copies of everything, then ran a bunch of new tests at http://video11.mkdev.org.

The results are perplexing.

After setting up mp4 and webm presets with everything set to defaults, I uploaded a variety of source file formats based on the same original file. One would think that the ability to display would be consistent since the Video module is creating transcoded versions while Video.js is displaying them, but I'm seeing that some mp4 files play in Safari and Chrome, while others do not.

BROKEN:
DVCPRO50 > mp4 = audio only
DV > mp4 = audio only
Apple Intermediate Codec (AIC) > mp4 = (no codec support in my copy of FFmpeg)
MPEG-2 > mp4 = cannot upload file or add extension, but FFmpeg supports it

WORKS:
iPhone (mp4) > mp4
Apple ProRes 422 > mp4
JPEG-100 > mp4
Animation > mp4
Streaming mp4 > mp4

(Verified on OS X Snow Leopard, Lion, and an iPhone (iOS 5.0))