Video Player

  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

To start out I don't want an out of the box solution or something already created.

So I was just informed, and I couldn't be more excited about this, that the company I work for is changing the companies defaults browser to Chrome from the dreaded IE. With this change they want to redo the video portal of the company to be more cross browser/platform compatible. Since newer devices are no longer supporting Flash means my flash player is going to be replaced by something else.

To address the first sentence in this thread. The reason I don't want something already made is if something breaks I need to fix it as quick as possible. building something from ground up adds knowledge and skill into my arsenal so I can attack a problem head on and get it fixed fast.

This is mainly a thought process to get feedback to make sure I don't miss anything or see if others have a better idea.

Flash was my method of video delivery for a long time but now since there are devices that are coming out that do not come with flash any more and adobe is no longer supporting the mobile flash player is cause for rethinking.

HTML5 <video> tag would be a great way to go but there is no universal video format that will play cross platform/browser.

Like many things now a Hybrid approach seems like the best way to go.

Start with the HTML5 video tag for browsers who support it with a flash player fallback to support the browsers that don't. As for my research so far the preferred video format is an MPEG 4 however it needs to be configured in a way that it is compatible with iPhone or iPad. Once in that format HTML5 will use the built-in player on browsers such as Safari and IE 9. This takes care of many browsers on the Mac, PC, and iOS. For viewers using Firefox or Chrome, or for older versions of Internet Explorer, a Flash player will be used. This method of attack should cover nearly all possible outcomes.

If my research is correct :wink:

I'm curious to see what others come up with and love to hear other possible thoughts on the multi-platform solution.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9102
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

You seem to be on the right track. I had done some research on this awhile back for HTML 5 and from my understanding if you want to support all the major browsers and the majority of devices you will need to at least upload two videos, and you could still have your Flash as a fallback if you wanted. Here is a good link:

http://www.html5rocks.com/en/tutorials/video/basics/

Keep in mind that article was created in 2010, but it is still relevant I believe. Back when they created it they mentioned including 3 different video formats, but also mentioned that within a year you can drop it to two and it would look something like this:

HTML Code: [ Select ]
<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
</video>
  1. <video>
  2.   <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  3.   <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  4.   Video tag not supported. Download the video <a href="movie.webm">here</a>.
  5. </video>


It does go on to mention what you will want to do with IE versions that do not support the video tag. If you are concerned about that, then that is where you can use Flash as a fallback, but that part may be more complicated.

As you know there are some great open source frameworks for handling all of this, but since you are not choosing to use that as long as you know what formats you need to include you can probably write up your own fallback method.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9102
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Something else to consider as well. When I was first looking into this I was thinking what a pain to have to have at least two videos encoded for every single video you wanted to show your visitors. Depending on what sort of access you have for your servers, there are scripts you can install that will automatically create the converted versions for you. This would allow you to only have to upload the one format you want, and your script would automatically create the other version(s) that you need. A few additional resources for you:

http://www.webmproject.org/tools/

So you would likely want to use ffmpeg and the commands would look something like this:

Code: [ Select ]
ffmpegdirectory/bin/ffmpeg.exe -i your_video_path -qscale 4 -vcodec libx264 -f mp4 your_new_video_path.mp4

ffmpegdirectory/bin/ffmpeg.exe -i your_video_path -qscale 4 -f webm your_new_video_path.webm
  1. ffmpegdirectory/bin/ffmpeg.exe -i your_video_path -qscale 4 -vcodec libx264 -f mp4 your_new_video_path.mp4
  2. ffmpegdirectory/bin/ffmpeg.exe -i your_video_path -qscale 4 -f webm your_new_video_path.webm


If you use PHP you could execute with the system or exec function if you wanted to create some sort of script to automate the process.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Yea we are going to be making a system that uses FFMPEG but what going to suck is each video has two versions high res and low then we have two servers internal and external So I'd have to create 8 videos lol unless we find a better way of storing the videos.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

I cannot convert a video into a mp4 file type that works on IE 11 or fire fox 25

Chrome 31 works fine just using the mp4 and safari 5 reverts to the flash player (Desktop applications mobile testing will happen a bit later)

I used both sorenson squeeze 8 and FFMPEG to make the mp4 with so many variations of codecs including the ones suggested to be used as well as others and IE error is (Error: Unsupported video file type or invalid file path) FF (No video with supported format and MIME type found) :hmm:
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

:shock: .... Wow figured it out
You need to add to your .htaccess file to get the videos to work on firefox and IE in safari it defaulted to flash because i didn't have quick time installed it works fine on mac's safari as well, IE 8 defaults to flash
Code: [ Select ]
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
  1. AddType video/ogg .ogv
  2. AddType video/mp4 .mp4
  3. AddType video/webm .webm
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9102
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Awesome, glad you figured it out! Looks like your server by default wasn't sending those types for those file extensions.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 34 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.