LISBON 10-12
APRIL 2014
LISBON 10-12
APRIL 2014

Edit your talk

Talks > Web Video - building a player for current times

Status

This talk has been approved for this year's edition. Check the calendar for more information.

Language

English

Abstract

For the past year and a half I've been writing client-side infrastructure for what can be summarized as a feature-rich and cross-device web video player for SAPO.
Cross-browser meaning it must work in recent browsers, older ones (via a Flash abstraction) and overcoming mobile restrictions (such as iPhone's). Feature-rich because it supports ads serving, subtitles, quality switch, related videos, etc. For these I wrote a plugin system.

I propose to describe and discuss:
- the challenges I've faced;
- pitfalls I had to overcome to make a robust player;
- strategies I employed to structure and evolve this project;
- debugging and testing (both really hard in this scenario).

Won't go into more detail for now because I wish to revise its structure in the remaining weeks.

I'll put together a presentation for the 45 min on these subjects but I'm glad to answer any questions you have, making the talk more interactive.

Proposal date

2014-01-15 12:31:27

Rate & Comment

You can use this section to optionally comment on this talk (comments are public). Your comment is saved when you press the "comment" button at the bottom. Your thumb decision is private, no one will see it. You can change thumb decision at any time later, the last submission will prevail. You can post as many comments as you want.

You need to be registered and logged in to comment or rate this talk proposal.

Comments

António Pedro Oliveira Cunha Santos
on , said:

+ José Pedro Dias

A bit to short the abstract.

<quote>"Depending on the audience participation this talk can have a larger Q&A part, otherwise I'll spend more time in the slides."</quote>Do you have any "Plan B" in case of the Q&A does not goes as well as expected ? Watching slides and hearing about them, can be somehow "boring", depending on the tech level of them.

I'll gladly vote up, but I'd like to know a bit more, before making my mind, and voting.

Thx

$geekfactor 0x4

Nuno Paz
on , said:

Nice!

$geekfactor 0x0

Emanuel Alves
on , said:

+ António Pedro Oliveira Cunha Santos
+José Pedro Dias

I have the same opinion.

$geekfactor 0x0

Fernando Araújo
on , said:

Looks interesting, looking forward to see this.

$geekfactor 0x0

José Pedro Dias
on , said:

+ António Pedro Oliveira Cunha Santos, I've already made a draft of the content I intend to speak about. I plan on improving and reviewing it if you guys vote for this talk.
I may expand on most of the addressed topics by providing examples and pointers for reference in case of interest. In the end it enriches the talk slides for offline visualization too.

$geekfactor 0x0

José Pedro Dias
on , said:

+ Nuno Paz, hello sir. :)

$geekfactor 0x0

José Pedro Dias
on , said:

The only reason I haven't given a more detailed overview is so I can have leeway to improve it.

By the way, this is an awesome presentation reference: http://speaking.io/

$geekfactor 0x0

António Pedro Oliveira Cunha Santos
on , said:

+ José Pedro Dias

Nice presentation reference! :) Just finished reading it.

$geekfactor 0x0

Patro
on , said:

Was the player you build flash or html5 based?

$geekfactor 0x0

José Pedro Dias
on , said:

+Patrick Rompf, it supports 3 main scenarios:
* iPhone and old Androids -> video element playing back in native player without any custom GUI
* IE < 8 and browsers without video element -> old Flash dedicated player
* otherwise -> high end player, with 2 abstract implementations with same API for Flash and HTML5 video element.***

***
The high end player can switch between the video implementation based on the mime type of the requested video to load next.

Example:

Scenario 1: you're in IE9 with Flash installed and I wish to serve a MP4/H2.64 video preroll ad followed by a live stream from a TV channel -> the video ad is shown in a video element and it is replaced by the Flash implementation so the RTMP stream is displayed.

Scenario 2: you're in a recent Safari or an IPad -> you would get both shown via video element, with the live stream served in HLS.

Scenario 3: you're in a Mozilla Firefox < 25 -> you would get both via Flash because it's video element can neither render H.264 nor HLS...

$geekfactor 0x1

Nuno Paz
on , said:

+ José Pedro Dias, nice topics

$geekfactor 0x0

Patro
on , said:

+ José Pedro Dias, That sounds thoroughly thought trought but I'm just wondering why it's necessary to create yet another video player (e.g. there is JWPlayer). You mentioned the ad display at the begining - perhaps this is one reason.

I'm working on a project that does interactive live streaming, interactive live streaming means that the viewer can vote the current happening and write a contribution that will influence the further ongoing. The voting / text input is done via html and is not linked to the video player - but I really would like to do glue them together. One scenario would be to show a quote at a specific time and give the visitor the option to rate that in particular. That would be a reason for me to write yet another video player ;).

$geekfactor 0x0

David Amador
on , said:

This sounds interesting, count me in

$geekfactor 0x0

José Pedro Dias
on , said:

Updated the abstract. Hope you find it more informative now.

$geekfactor 0x1

Ricardo Machado
on , said:

Upvoted claro...!

E posso-vos garantir que isto dá um trabalho do c....! Parece ser uma coisa simples, implementar um video player e tal, mas lidar com todas as quirks dos browsers e devices ...

Temos muito a aprender com este SENHOR!!!

$geekfactor 0x0

António Pedro Oliveira Cunha Santos
on , said:

+ José Pedro Dias,

Better abstract! ;) Anyway, it already had my upvote! ;)

$geekfactor 0x1

João Ricardo Lourenço
on , said:

Estou à espera :D

$geekfactor 0x0

Jorge Cavaco
on , said:

nice!

$geekfactor 0x0

Pedro Costa
on , said:

Computer says yes!!!

$geekfactor 0x0

Pedro Costa
on , said:

Computer says yes!!!

$geekfactor 0x0

Paulo J Morgado
on , said:

please, not flash...again!!!!

$geekfactor 0x0

José Pedro Dias
on , said:

+ Paulo J Morgado, o player tenta alienar o mínimo possível de audiência.

Se quiseres servir H.2.64 para vídeos estáticos e HLS para directos só te safas com o Safari. Directos no Chrome só com DASH. Firefox nem DASH suporta tanto quanto sei e começa agora a rodar H.264 via codecs do SO.

No mundo ideal podes dizer isso. E a quota de mercado que ainda temos de IE8...

A minha abordagem, que recomendo, é usar tudo o que houver à disposição do browser para proporcionar a melhor experiência possível. Foi preciso criar/reutilizar um flash player o mais básico possível e fazê-lo reportar os eventos e expor os métodos relevantes para o controlar da forma o mais semelhante possível ao video element. Depois usa-se a implementação mais apropriada (video element ou o flash) consoante o browser em questão e o mime type/codec do vídeo a apresentar. E o GUI do player vive acima disto, mantendo a experiência coerente.

$geekfactor 0x1

Sérgio Laranjeira
on , said:

Quando o HTML5 apareceu pensou-se que o player de video seria rapidamente um problema do passado... mas ainda o temos... e está para durar. Espero que seja aprovada.

$geekfactor 0x0

Jorge Costa
on , said:

+ José Pedro Dias Seria interessante o player de video ser open-source :)

$geekfactor 0x0

Andre Duarte
on , said:

This seems really interesting. I was tinkering with the tag video back in 2010 and there were ridiculous problems such as frame-by-frame navigation having to be done in two different ways for the Android native browser and the Chrome mobile browser... What a mess... I hope things are better now! :)

$geekfactor 0x0

José Pedro Dias
on , said:

+ Andre Duarte, err the specs are still poorly adopted. Codec detection is ugly, there's no cross-browser cache reporting, error reporting sucks, the order/omission of some of the events being fired is a hindrance...

I don't know how to do frame-by-frame in video element. Why would you want that? Extract all frames to canvas?

$geekfactor 0x1

Andre Duarte
on , said:

+ José Pedro Dias, in my case, it was a project (my MSc thesis) for RTP where we needed frame-by-frame navigation, since archivists are used to that. The easiest solution was to go forward in time the inverse of the frame-rate. I don't remember if it was chrome or android browser that wasn't supporting that... For that one the solution was really a Canvas - but try to put hours of video in a canvas and your tablet melts... :)

$geekfactor 0x0

Tiago André Santos Casqueira
on , said:

Despite the interesting subject, I'd like to be assured of the interactive level of the presentation.

$geekfactor 0x0

Henrique Rodrigues
on , said:

Considering the problems that still exist today related to video playing, I've voted this one up.

$geekfactor 0x0

Miao Sun
on , said:

upvoted!

$geekfactor 0x0

You must log-in in order to comment this.