CODEWITHSUNDEEP
htmlvideo
user2526586
user2526586

Reputation: 1202

HTML5 video using only one video format

Adobe has said that it plans to phase out its Flash Player plug-in by the end of 2020. People said that all Flash content should have been migrated to other technologies like HTML5. I agree more or less, but how ready is HTML5 when in comes to replacing Flash entirely?

Let's take an everyday example - video playback on web.

On Flash, I can just embed one player for all the videos on a website and just change the paths to link to different FLV videos(or MP4's) for different videos on the site. As long as Flash is installed on client side, I need not worry much which browser they are using.

However with HTML5, to be cross-browser compatible, AFAIK, I need to have three video files (three different formats of the same video - MP4, WEBM and OGG). 

<video id="video" controls preload="metadata" poster="img/poster.jpg">
  <source src="video/v1.mp4" type="video/mp4">
  <source src="video/v1.webm" type="video/webm">
  <source src="video/v1.ogg" type="video/ogg">
  <!-- Flash fallback -->
  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/v1.mp4" width="1024" height="576">
     <param name="movie" value="flash-player.swf?videoUrl=video/v1.mp4" />
     <param name="allowfullscreen" value="true" />
     <param name="wmode" value="transparent" />
     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/v1.mp4" />
     <img alt="My video" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
  </object>
  <!-- Offer download -->
  <a href="video/v1.mp4">Download MP4</a>

If I have 80+ different videos on the site, I will have to host 240+ video files on the server, which is quite troublesome to prepare and manage the files. I hate to transcode a video to different format every time before putting the video content on the server.

It is now mid-2017, and HTML5 video is nothing new. I wonder if there is any new cross-browser compatible method/hack to embed video playback using just one video format?

Upvotes: 0

Views: 1614

Answers (2)

MeisterPlayer
MeisterPlayer

Reputation: 101

HTML5 is very ready for video. The advantages of using HTML5 over Flash is also to have playback on mobile which is definitely a must in 2017. To the solution to your issue the best you can do is use MP4 (encoded with h264 and aac). This video format is supported on all browsers (webm and ogg are only supported on some browsers).

Upvotes: 3

Offbeatmammal
Offbeatmammal

Reputation: 8238

MPEG-DASH is the new "one standard to rule them all" but it's a way off native support across all browsers at the moment. One answer would be to use a player like Ooyala's or Shaka.js to give you a polyfill, but that's going to be limited in support for older browsers.

If you're worried about managing assets there are Media Asset Management systems that can take a single asset and produce a variety of versions (eg mp4, webm, ogg as well as fragmented mp4 such as HLS and Dash) or you could roll your own using something like ffmpeg for transcoding or use a service like Azure Media Service

Upvotes: 0

Related Questions