Hacker News new | ask | show | jobs
by dplgk 3784 days ago
Has anyone here that is excited about HTML5 video (and Flash being dead) ever written an enterprise video player? It's a total nightmare in HTML5. You have little control over playback and insight into video events. Meeting business requirements (that Flash fulfilled) with HTML5 video ranges from hard to not possible.
8 comments

> You have little control over playback

This sounds user-friendly.

> insight into video events

If "insight" means "tracking", this sounds very user-friendly.

> If "insight" means "tracking", this sounds very user-friendly.

What about a slideshow which has a video of the speaker, and changes the slides for particular timestamps.

At the moment you'll have to detect the playback event and just hope that the video is playing back at the "correct" speed, and change the slides based on a JavaScript clock.

While that works most of the time, it isn't what I'd describe as reliable.

Alternatives exist, like making the slides part of the video too, but now text cannot be copied out, links cannot be clicked, and so on...

I am by no means experienced in this area, but a quick search of MDN showed the 'timeupdate' event[1]. Is that not sufficient for the usecase you gave? The timestamp itself is available through the 'currentTime' property[2] so you can always have that value as well.

[1] https://developer.mozilla.org/en-US/docs/Web/Events/timeupda...

[2] https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaEl...

Edit: Added links for quick reference.

In theory, yes, that’s how you’re supposed to do it. Unfortunately, part of the real world problem with switching to HTML5 media elements is that browsers have an awful track record in terms of quality of implementation. At various points, even quite basic events simply haven’t been firing properly in one browser or another. And with browsers updating every six weeks and frequently changing things like the default controls you get on a video element, you’re constantly aiming at unnecessarily moving targets as a developer.
Yep, here's an example - if you mouse down on the video thumb, and don't move the mouse nor release the mouse button (so basically you've held the thumb in place):

- Does the pause event fire?

- Does the seeking event fire? Or does it only fire when you move the mouse to drag the thumb to a new time?

- Does the seekend event fire? Does it fire every time you move the thumb to a new position without releasing the mouse button? Or does it only fire when you release the mouse button?

- Does the timeupdate event fire? Does it fire once? Or repeatedly for the same position where the thumb is?

Every browser has different answers.

As for the timeupdate event, it only fires once every 250ms, which is painfully slow for applications that need to synchronize something with the video (slides, subtitles, etc.)

And even if you decided to ignore all the events and write a requestAnimationFrame-powered loop to query only the changes in the currentTime property, there's a bug in Chrome on Android where the video.currentTime property becomes out-of-sync with the video if any long-running JS or complicated animation blocks the event loop for a few seconds - https://code.google.com/p/chromium/issues/detail?id=509010

Or you can have a javascript loop check the video's current time.
> If "insight" means "tracking", this sounds very user-friendly.

I personally would like advertisers and content producers to know at which point it is that users tend to bail on watching their video, or will click through to the content. That might allow business users to receive useful feedback and actually optimize their funnel, instead of wasting my time with a shotgun, best guess approach.

It would be interesting to see Youtube's statistics on this, because for almost every case personally on my mobile devices and every case I've seen others deal with, that bail-out point is "as soon as possible" if the ad can be skipped.
It wouldn't be so bad, if they would show you more than one or two different ads. I remember Hulu being especially egregious about that. I'd watch a couple hours of the back catalog of some show, and see maybe 20-30 ads in their "commercial breaks", except it was always the same ad.
There are many cases where it’s much more user-friendly to have proper control over audio/video players and proper event handling: custom controls to change resolution/quality settings, synchronization of the audio or video with accompanying material, integration of video with other content, having interactions elsewhere on a page adjust audio or video to match, remembering which tutorials a user has finished so you can start with the next one ready to go next time, and that’s just what I came up with in a few seconds.

Sure, if you just want to play your free videos from a site where each page is basically just a wrapper around the video element, and you don’t need any configuration for quality settings and the like, then custom control and events might not be particularly interesting. However, HTML5 media elements should let us do much more than that.

Yeah keeping track of where you stopped watching a video so they can continue the video at that time automaticially is indeed user-friendly.

Are you going to tell me view counters are evil too?

Obviously user friendly but businesses don't care when they can't get their metrics.
I'd recommend one of the open source players, like video.js[1]. Unless you are doing some really advanced things it should cover your needs.

[1] http://videojs.com/

It's terribly primitive and altogether broken from some features (unfinished). Just an fyi
Can you elaborate on this? At work we have a HTML video player that works with files, YouTube, and Vimeo all with the same skin, and we're easily able to do things like save state across sessions. I will say that the transcoding aspect can be complicated. What limitations have you hit?
Listening for video events (cross-browser) reliably. When is a video loading, buffering, paused, what time is it? etc
Is there any technical or legal reason why it's not as easy to handle playing video as it is to show an image, from a site developer point of view? Why can't the browser do it natively? Why does it have to be handled via JavaScript and whatever else?
Today playing a video more complex than just decode a .mp4 file: most broadcasters use Adaptive Bitrate streaming formats like HLS and MPEG-DASH, that add a lot of complexity: How do you get the qualities and languages list? how and when do you switch the video quality? etc

In case of hls.js used by the NYT, you actually need to transmux the mpeg-ts content used in HLS into fMP4 to make it playable by the Media Source Extensions API used by the browsers.

yea, the transmuxing is unfortunately buggy though. i had to recently switch my site back to flash because so many browsers have issues with it. it loads way faster though
HLS.js is doing great on Chrome, FF, Edge and Opera. For Safari it's better to use the native HLS player for now. The best option is to have HLS.js first on compatible latest browsers and Flashls as a fallback on older ones
When did you try doing it? Things evolved a lot in the last 3 years in terms of video streaming support in HTML5, and today everything that was doable in Flash is doable in HTML5 with MSN and EME. You have control over the playback almost up to the keyframe today. Do you have any specific features in mind?
FWIW, I'm pretty sure Popcorn has been abandoned, which is a shame.
there is also http://clappr.io
I find that landing page truly frustrating. I can't do anything besides watch the background video and "Star" them on Github.
I don't know if it was because I'm not signed in to github but by clicking star I ended up in their repo. Still, while it's laudable that you might have just one clear button a la google so there's focus, this can be somewhat confusing.
an enterprise video player wasn't exactly a picnic on Flash. How do I know? Because even the "enterprise" players would crash browsers constantly.