Solved

has anyone built a quicktime "fallback" into mediaelement js?

Posted on 2015-01-21
31
390 Views
Last Modified: 2015-01-26
i'm doing a bit of research on how best to go about this.
we need to play .mov files with the html5 video player MediaElement JS but have discovered that most of our mov files do not play in the flash fallback - wrong encoding I'm guessing. please don't suggest re-encoding as there are literally millions of files.
i'm thinking that this doesn't need to be an actual fallback as I don't have the knowledge on how to build a fallback - unless you want to instruct me on that.
also the solution needs to be "within" the player. when i first discovered this .mov file thing (most of the files are mp4) I thought the simplest would be an if else statement - if file is .mov then show quicktime - else show mediaelement.
now that logic is fine as long as it's inside the player and can work with a playlist that may be of mixed content - some mp4 and some mov.

i'm open to ideas ...
0
Comment
Question by:dgrafx
  • 17
  • 14
31 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40565748
My understanding is the "if, else" happens automatically in the order you place in your <video> tags.

Try the code below but I haven't tested it in this format.  Is this even how you're embedding your videos?

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
    <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
    <source type="video/mp4" src="myvideo.mp4" />
    <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
    <source type="video/webm" src="myvideo.webm" />
    <!-- Ogg/Vorbis for older Firefox and Opera versions -->
    <source type="video/ogg" src="myvideo.ogv" />
    <!-- Optional: Add subtitles for each language -->
    <track kind="subtitles" src="subtitles.srt" srclang="en" />
    <!-- Optional: Add chapters -->
    <track kind="chapters" src="chapters.srt" srclang="en" /> 
<!-- Try Quicktime before Flash -->
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  codebase="http://www.apple.com/qtactivex/qtplugin.cab"
  width="320" height="260">
  <param name="src" value="sample-video.qtl" />
  <param name="controller" value="true" /> 
  <param name="autoplay" value="true" />
  <!--[if !IE]>--> 
  	<object type="video/quicktime" 
		 data="sample-video.qtl" 
		 width="320" height="260"> 
		  <param name="autoplay" value="true" /> 
		  <param name="controller" value="true" />
		  </object> 
	<!--<![endif]--> 
</object> 
    <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
    <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
        <param name="movie" value="flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&file=myvideo.mp4" />
        <!-- Image as a last resort -->
        <img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
    </object>
</video>

Open in new window

0
 
LVL 25

Author Comment

by:dgrafx
ID: 40565762
Thanks Rob!
However if you look at the source code briefly - can download from http://mediaelementjs.com/ - the logic for the fallback is in js files.
The first player I built a few years ago was of the format you are showing here.

If you have the time to look at the source it would be great to see how to implement your idea.
Essentially all we do now is this:

<link href="mediaelementplayer.css" rel="stylesheet" type="text/css" />		
<script src="jquery.js"></script>				
<script src="mediaelement-and-player.js"></script>	

<video id="xyz" controls>							
	<source src="myfile.mp4" type="video/mp4">
	<p>Your browser leaves much to be desired.</p>
</video>

Open in new window


and if the browser doesn't understand mp4 then flash is used.

Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40569128
Yes I see that, Option A is what you're wanting to use and Option B is what I've specified.  The issue is that it's not a simple fix in the code.  There is quite a bit of coding to get what you'd want with just the html you've specified.

Do you already have the html playlists set up?  Is that why you're hesitant to change the html to what I've suggested?
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40569478
Hey Rob - here is the situation as best I can describe it.

We needed to build an html5 player to play mp4 files.
A few years back I used media element js to build a YouTube player so thought I'd use it again.
Downloaded the latest version which has the flash fallback integrated and built a player.
The concept was one player with multiple instances on whatever site pages. There are several settings that are sent into the player from each instance such as size or disallow full-screen and of course the video and poster image. There were many tweaks to achieve a uniform look across all browsers including ios and android.
The project was pretty much finished and all was swell until a developer discovered that the flash fallback wasn't playing .mov file video - it played the audio only.
Note that it will play some .mov video just not the majority of ours!

The playlist thing is really not an issue - it is just a series of links encoded with appropriate settings and using jquery one can set the video src and poster and whatever else.

===

Are you saying that the code you posted is a working model?
Meaning that you don't need any helper js (such as mediaelement js or other products out there) and that all you need do is place the video tag and the object embed code within - and that the browser does all the work falling back to the next element it understands?

Thanks
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40569504
Note
We only have 2 file types - mp4 and mov - all new files are mp4 but a LOT of older mov files.

Firefox before version 35 supports the video tag but does not support mp4 files (FF 35 now supports mp4).
This is a different scenario from a browser that doesn't support the video tag at all and then will fall back to flash.

Just fyi ...
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40569627
Are you saying that the code you posted is a working model?
Meaning that you don't need any helper js (such as mediaelement js or other products out there) and that all you need do is place the video tag and the object embed code within - and that the browser does all the work falling back to the next element it understands?
yes that's my understanding. I just haven't been able to test the theory. The issue will be with the plugins. Looking at my code you'll either have it work as a fall-through or it will show both QuickTime and Flash object on the page.
Ideally, rewriting the mediaelement js library would be ideal so that you're just adding the relevant QuickTime class to it. However, if you need to get this finished in a hurry, I would write a quick js script that detects the filename and if it's mov, replace the video tag with the corresponding video tag with the QuickTime tag inside it
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40569629
The other issue may be, doors QuickTime play ALL the mov files you have? I'm assuming it does but you can't assume anything can you! ? :)
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40569651
Issue: google has disabled the QuickTime Player on Chrome 64 bit on the Mac.
This was a huge hit on our user base - you can research the issue if you want.
So the thought was build an html5 video player that Chrome does support as well as all the other browsers - flash fall back and all that of course.
But now this mov file issue - we had assumed that they would play with flash.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40569669
Talk about being stuck between a rock and a hard place... :s

So given that Quicktime is disabled on Chrome 64 bit on the Mac and Flash nor the video tag work for some of your mov files what were you going to do for those Mac users?

Those mov files have been encoded differently.  Are you able to determine what the codec used was in the mov files that have failed?
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40569681
Can you confirm that Quicktime in the browser actually does play the mov files with the issue?  Does it require a special codec on the client?

Obviously the next step is to set a script running (on the server), that detects the codec in each mov file and if it is the problem codec, re-encodes it with a supported codec.  Could this be faster than trying to work out a html solution?  I'd like to get this working in the browser too but from what you've said regarding Chrome not supporting the quicktime plugin and the mov files have a custom codec, what choice do you have?
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40569690
All new files are encoded properly using mp4 / h 264.
And there is an operation going on that is re-encoding the older mov files.
But this will take time months I'm told actually.

I believe the best bet is if it is an MOV file then Quicktime - and just deal with chrome 64 bit on the Mac until all the mov files get re-encoded.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40569703
Sure. Just had to get an idea of the situation.

You can confirm that the QuickTime plugin is working for the older mov files?
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40569709
yes - no problem - just on chrome is the issue
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40569710
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40569718
Ok so we're back to the two options I mentioned above.

 have you tried using both object tags within the video tag?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 25

Author Comment

by:dgrafx
ID: 40569731
Not yet - not in front of code ..,
The weekend ya know ...
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40569740
I'm working on this still but I did find these interesting articles from Apple regarding falling back to Quicktime as opposed to flash:

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html

In particular, using this js library: https://developer.apple.com/library/safari/samplecode/HTML_video_example/Listings/ac_quicktime_js.html
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40569741
The weekend ya know ...
yeah good point! :)
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40569757
Awesome - will look into it ...
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40571244
real good starting points Rob.
I am however still stuck!
I can't get the fallback to work properly for firefox.

The js involved in modifying mediaelement js to add a quicktime fallback is over my head I believe - unless I stumble onto something in the code that made it easier.
0
 
LVL 25

Author Closing Comment

by:dgrafx
ID: 40571246
Let me know if you find something ...
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40571627
Rob - out of curiosity - how do I determine what codec a .mov video file has?
Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40571641
You'll need a program to do this.. I've used MediaInfo: http://mediaarea.net/en/MediaInfo

Capture.JPG
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40571659
Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40571671
Been thinking about your issue and have you thought about writing a simple detection script of your own that just detects the browser and either includes the mediaelement library or the QuickTime fallback accordingly?
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40571685
I think you're outta luck with Firefox if it doesn't support Quicktime and the mov file doesn't play in Flash or HTML5 video... What about giving the user the option to the user to download the video?
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40571693
I actually had to disable downloads ...
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40571729
another q - where can i download an older version of flash player?
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40571754
standalone player of course that I can use for the flash fallback ...
i'm thinking v6 or v7 ???
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40571859
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40571909
Here are the flash archives: http://helpx.adobe.com/flash-player/kb/archived-flash-player-versions.html

I'll also take a look at that question
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now