6 ms·

HTML5 Video and the End of Plugins

126 points by milkers 12y ago

nakovet 12y ago
Exciting! Just waiting for the adoption to be standard so I can try this for real, for example Chrome 39 on OS X 10.10 don't support recording.
qwerta 12y ago
> Note – Before we get started, I need to be clear that the example we’re building only works in Firefox.
- milkers 12y ago
  >> If you want to make this work in Chrome as well, there are projects such as RecordRTC and MediaStreamRecorder.
harshreality 12y ago
HLS (http live streaming, .m3u8 rotating playlists of chunks of video) isn't supported by desktop browsers except for Safari. That seems to be preventing live streaming sites from migrating away from flash. Notably, NASA's videos of the Orion mission were on flash on desktop, but their mobile site (mobile browsers—iOS, and Android since Honeycomb—support HLS) wasn't using flash.
- lern_too_spel 12y ago
  HLS is on the way out. (Was it ever really in?) All the big video sites are implementing DASH.
  - rustyconover 12y ago
    I doubt this highly. And if they are moving to DASH it is implemented by Flash.
    - hayksaakian 12y ago
      the recent "steam broadcasting" (live video game streams served via steam's service) uses DASH and is works with pure HTML5 (no flash needed)
      - rustyconover 12y ago
        Not in safari or iOS
        lern_too_spel 12y ago
        Safari on Mac now supports MSE, on which there are multiple DASH implementations. Safari on iOS is behind, but it's not hard to guess where it's going.
        JohnTHaller 12y ago
        According to Steam it works in the Steam Client, Google Chrome, and Safari: https://support.steampowered.com/kb_article.php?ref=6730-TOAK-6497#18 https://support.steampowered.com/kb_article.php?ref=6730-TOA... If they just say 'Safari', it probably doesn't work on iOS at the moment. But it should work on your Mac unless an extension/addon is interfering.
      - shmerl 12y ago
        In order for DASH to work you need Media Source Extensions support. Firefox for example doesn't support them yet.
        mcovey 12y ago
        They're hidden behind an about:config flag - media.mediasource.enabled The latest version of developer edition/aurora just enabled them by default, so version 36. They may be only ~12 weeks away from becoming default in the stable build.
        shmerl 12y ago
- jewel 12y ago
  The webm video container live-streams fantastically well. It's just the MP4 container that is broken and doesn't live-stream. Note that if you put H264 in an MPEG2-TS container that it will stream fine as well, but unfortunately that's not supported by browsers. (It also is inefficient, which makes it a poor choice.) There is fragmented MP4, (usually called fMP4), which is a single MP4 file with multiple fragments inside. The last time I looked this wasn't supported by any browser, but now it looks like there's been work to integrate it into chrome and firefox. The reason that single-file live-streaming is useful is that you can point the video tag's SRC at a URL that just calls popen on an FFMPEG process and transcode video on the fly, or even create new content immediately.
  - lern_too_spel 12y ago
    GP is talking about adaptive streaming with HLS. What you're discussing works only if all your clients have the same bandwidth.
seccess 12y ago
I'm really impressed with how powerful HTML has become with respect to video content. Of particular note is the Flow Player [0], which I love to see websites use, primarily because it works without JS enabled! In addition, it is fast and runs smoothly. I'm simultaneously really (un)impressed how often websites over-engineer their video content. Of particular interest is Youtube, which is neigh-unusable over a slow connection because the player refuses to buffer ahead and constantly tries to be smarter than it is by switching video quality :( [0] https://flowplayer.org/player/ https://flowplayer.org/player/
- bkurtz13 12y ago
  Can you really make that strong of an argument that YouTube's player is "overengineered"? I'm not always a fan of how they handle things but you have to at least consider the massive scale they are working at.
  - ishansharma 12y ago
    Since he was talking about slow connections, and I have seen YouTube issues on slow connections, here are two main issues: 1. The bandwidth switching is really messed up. When I'm playing something and it has buffered, let's say another 10 seconds and then quality of connection goes down, player will not switch quality after playing those 10 buffered settings. Instead, it discards all buffered data and fetches lower quality video again. 2. On iOS, video just gets stuck on low resolution. Picture will freeze, audio may stop or keep going and position indicator loops between 4-5 second interval. It will move forward 5 seconds, move back to the point it froze, repeat.
    - smileysteve 12y ago
      > 1. The bandwidth switching is really messed up. Think about the opposite use case, you're watching in low quality and decide to switch it to higher, the buffered video is all not what the user wants.
- Chris_Newton 12y ago
  Unfortunately, there are still some significant problems with the HTML5 video support in several major browsers. Among other things: 1. Chrome’s buffer size seems to be very small, enough to cause problems if you’re trying to watch very high resolution footage or play multiple videos together. 2. If you serve over HTTPS, Firefox sometimes seems to warn about mixed content even if everything is properly encrypted. 3. Some popular mobile devices/browsers don’t send cookies when requesting video files, which is a serious problem if you rely on those cookies for, say, authentication of logged-in users. 4. The canPlayType API is still one of the most bizarre and awkward I have ever encountered. 5. There is no standard for how video controls appear, or indeed if they appear at all before the video is actually playing. Moreover, some browsers will completely change their presentation of the controls as part of a software update from time to time. This makes it all but impossible to make clear to the user that something even is a video that they can click to play, if the video appears as part of a larger general content page rather than the obvious main element in a dedicated player page like YouTube. It also causes problems if you have short videos and include captions/annotations in the lower part of the video, as the controls may just stay there and obscure the content, which can be very frustrating for users. I think HTML5 video will be a great development in time, but right now, it is still quite an immature technology. You can use it fine in trivial cases, which is sufficient in practice for a lot of useful pages, but all kinds of not-that-tricky-really things are still broken. The more worrying thing is that some of these issues have been broken literally for years, and the browser makers show no great enthusiasm for fixing them, which hampers developing anything using the HTML5 technology that is more interesting than another basic video hosting site.
Animats 12y ago
allowing the browser access to your camera... What could possibly go wrong?
shmerl 12y ago
> Some of the things I talked about, like Encrypted Media Extensions, were, for the most part, still a pipe dream with few to no working implementations. Why would anyone dream about this DRM junk? Something to dream about is for example Daala codec which is supposed to arrive in 2015. Also, is there any non patented and freely available technology for adaptive video streaming? Unless DASH is not patent encumbered.
- olefoo 12y ago
  You don't want to encrypt your video chats with your lover? With your business associates? I guess you Don't Have Anything To Hide™.
  - deleted 12y ago
    [deleted]
  - shmerl 12y ago
    EME has nothing to do with security and privacy. It's all about DRM. If you want to encrypt your video chats you'd use something like ZRTP.
    - neohaven 12y ago
      Sadly, good, solid DRM (Here's an encryption key, an encrypted file, and a secure way for me to limit when and how you can use those) is the ultimate form of Snapchat. If you don't have DRM backing it up, the scenario is "Here's a key, a locked box, do whatever you want with the decrypted file." Which is less secure than being able to actually limit usage of the decrypted file. Nothing here implies that I think DRM is a good thing, mind you. I just think saying something is "just DRM", as if DRM wasn't basically encryption + limitations on use.
      - expr- 12y ago
        > a secure way for me to limit when and how you can use those That would be having them access the file in a restricted environment (literally, guards and stuff). You can't have people accessing your secrets in the comforts of their own homes and at the same time not be able to reproduce them in some form – even if an exact duplicate of the original data would be infeasible to obtain.
aikah 12y ago
HTML5 video! available everywhere and broken for everybody.
- NolF 12y ago
  No kidding! I tried to make a landing page with a <video></video>... seems like you need 3 versions of the same video for cross browser format compatibility...
drethemadrapper 12y ago
It's awesome to see that the Webrtc really started in Africa. I saw this video very recently - http://bit.ly/1ytjdx0 http://bit.ly/1ytjdx0 I also saw an interesting presentation of the researcher here - http://bit.ly/1s4kitL http://bit.ly/1s4kitL - on HTML5 & Webrtc

126 points by milkers 12y ago

Exciting! Just waiting for the adoption to be standard so I can try this for real, for example Chrome 39 on OS X 10.10 don't support recording.

qwerta 12y ago

> Note – Before we get started, I need to be clear that the example we’re building only works in Firefox.

milkers 12y ago
>> If you want to make this work in Chrome as well, there are projects such as RecordRTC and MediaStreamRecorder.

harshreality 12y ago

HLS (http live streaming, .m3u8 rotating playlists of chunks of video) isn't supported by desktop browsers except for Safari. That seems to be preventing live streaming sites from migrating away from flash. Notably, NASA's videos of the Orion mission were on flash on desktop, but their mobile site (mobile browsers—iOS, and Android since Honeycomb—support HLS) wasn't using flash.

lern_too_spel 12y ago
HLS is on the way out. (Was it ever really in?) All the big video sites are implementing DASH.
- rustyconover 12y ago
  I doubt this highly. And if they are moving to DASH it is implemented by Flash.
  - hayksaakian 12y ago
    the recent "steam broadcasting" (live video game streams served via steam's service) uses DASH and is works with pure HTML5 (no flash needed)
    - rustyconover 12y ago
      Not in safari or iOS
      - lern_too_spel 12y ago
        Safari on Mac now supports MSE, on which there are multiple DASH implementations. Safari on iOS is behind, but it's not hard to guess where it's going.
      - JohnTHaller 12y ago
        According to Steam it works in the Steam Client, Google Chrome, and Safari: https://support.steampowered.com/kb_article.php?ref=6730-TOAK-6497#18 https://support.steampowered.com/kb_article.php?ref=6730-TOA... If they just say 'Safari', it probably doesn't work on iOS at the moment. But it should work on your Mac unless an extension/addon is interfering.
    - shmerl 12y ago
      In order for DASH to work you need Media Source Extensions support. Firefox for example doesn't support them yet.
      - mcovey 12y ago
        They're hidden behind an about:config flag - media.mediasource.enabled The latest version of developer edition/aurora just enabled them by default, so version 36. They may be only ~12 weeks away from becoming default in the stable build.
        shmerl 12y ago
jewel 12y ago
The webm video container live-streams fantastically well. It's just the MP4 container that is broken and doesn't live-stream. Note that if you put H264 in an MPEG2-TS container that it will stream fine as well, but unfortunately that's not supported by browsers. (It also is inefficient, which makes it a poor choice.) There is fragmented MP4, (usually called fMP4), which is a single MP4 file with multiple fragments inside. The last time I looked this wasn't supported by any browser, but now it looks like there's been work to integrate it into chrome and firefox. The reason that single-file live-streaming is useful is that you can point the video tag's SRC at a URL that just calls popen on an FFMPEG process and transcode video on the fly, or even create new content immediately.
- lern_too_spel 12y ago
  GP is talking about adaptive streaming with HLS. What you're discussing works only if all your clients have the same bandwidth.

seccess 12y ago

I'm really impressed with how powerful HTML has become with respect to video content. Of particular note is the Flow Player [0], which I love to see websites use, primarily because it works without JS enabled! In addition, it is fast and runs smoothly. I'm simultaneously really (un)impressed how often websites over-engineer their video content. Of particular interest is Youtube, which is neigh-unusable over a slow connection because the player refuses to buffer ahead and constantly tries to be smarter than it is by switching video quality :( [0] https://flowplayer.org/player/ https://flowplayer.org/player/

bkurtz13 12y ago
Can you really make that strong of an argument that YouTube's player is "overengineered"? I'm not always a fan of how they handle things but you have to at least consider the massive scale they are working at.
- ishansharma 12y ago
  Since he was talking about slow connections, and I have seen YouTube issues on slow connections, here are two main issues: 1. The bandwidth switching is really messed up. When I'm playing something and it has buffered, let's say another 10 seconds and then quality of connection goes down, player will not switch quality after playing those 10 buffered settings. Instead, it discards all buffered data and fetches lower quality video again. 2. On iOS, video just gets stuck on low resolution. Picture will freeze, audio may stop or keep going and position indicator loops between 4-5 second interval. It will move forward 5 seconds, move back to the point it froze, repeat.
  - smileysteve 12y ago
    > 1. The bandwidth switching is really messed up. Think about the opposite use case, you're watching in low quality and decide to switch it to higher, the buffered video is all not what the user wants.
Chris_Newton 12y ago
Unfortunately, there are still some significant problems with the HTML5 video support in several major browsers. Among other things: 1. Chrome’s buffer size seems to be very small, enough to cause problems if you’re trying to watch very high resolution footage or play multiple videos together. 2. If you serve over HTTPS, Firefox sometimes seems to warn about mixed content even if everything is properly encrypted. 3. Some popular mobile devices/browsers don’t send cookies when requesting video files, which is a serious problem if you rely on those cookies for, say, authentication of logged-in users. 4. The canPlayType API is still one of the most bizarre and awkward I have ever encountered. 5. There is no standard for how video controls appear, or indeed if they appear at all before the video is actually playing. Moreover, some browsers will completely change their presentation of the controls as part of a software update from time to time. This makes it all but impossible to make clear to the user that something even is a video that they can click to play, if the video appears as part of a larger general content page rather than the obvious main element in a dedicated player page like YouTube. It also causes problems if you have short videos and include captions/annotations in the lower part of the video, as the controls may just stay there and obscure the content, which can be very frustrating for users. I think HTML5 video will be a great development in time, but right now, it is still quite an immature technology. You can use it fine in trivial cases, which is sufficient in practice for a lot of useful pages, but all kinds of not-that-tricky-really things are still broken. The more worrying thing is that some of these issues have been broken literally for years, and the browser makers show no great enthusiasm for fixing them, which hampers developing anything using the HTML5 technology that is more interesting than another basic video hosting site.

Animats 12y ago

allowing the browser access to your camera... What could possibly go wrong?

shmerl 12y ago

> Some of the things I talked about, like Encrypted Media Extensions, were, for the most part, still a pipe dream with few to no working implementations. Why would anyone dream about this DRM junk? Something to dream about is for example Daala codec which is supposed to arrive in 2015. Also, is there any non patented and freely available technology for adaptive video streaming? Unless DASH is not patent encumbered.

olefoo 12y ago
You don't want to encrypt your video chats with your lover? With your business associates? I guess you Don't Have Anything To Hide™.
- deleted 12y ago
  [deleted]
- shmerl 12y ago
  EME has nothing to do with security and privacy. It's all about DRM. If you want to encrypt your video chats you'd use something like ZRTP.
  - neohaven 12y ago
    Sadly, good, solid DRM (Here's an encryption key, an encrypted file, and a secure way for me to limit when and how you can use those) is the ultimate form of Snapchat. If you don't have DRM backing it up, the scenario is "Here's a key, a locked box, do whatever you want with the decrypted file." Which is less secure than being able to actually limit usage of the decrypted file. Nothing here implies that I think DRM is a good thing, mind you. I just think saying something is "just DRM", as if DRM wasn't basically encryption + limitations on use.
    - expr- 12y ago
      > a secure way for me to limit when and how you can use those That would be having them access the file in a restricted environment (literally, guards and stuff). You can't have people accessing your secrets in the comforts of their own homes and at the same time not be able to reproduce them in some form – even if an exact duplicate of the original data would be infeasible to obtain.

aikah 12y ago

HTML5 video! available everywhere and broken for everybody.

NolF 12y ago
No kidding! I tried to make a landing page with a <video></video>... seems like you need 3 versions of the same video for cross browser format compatibility...

drethemadrapper 12y ago

It's awesome to see that the Webrtc really started in Africa. I saw this video very recently - http://bit.ly/1ytjdx0 http://bit.ly/1ytjdx0 I also saw an interesting presentation of the researcher here - http://bit.ly/1s4kitL http://bit.ly/1s4kitL - on HTML5 & Webrtc