The document provides an outline and overview of HTML5 video including:
1) Basics of setting up HTML5 video including recommended software, codecs supported by browsers, and standards being developed.
2) Details on editing and preparing video for the web including transcoding, publishing video on a webpage, and using JavaScript to control the video player.
3) Expert topics covering cross-platform publishing using fallback options, hosting video online, and considerations for accessibility.
This is a lightning presentation given by Sean Chung to our team to summarize a presentation he saw at JavaOne 2009. Sean also adds a slight spin to the original presentation by including Adobe Flex as an additional comparison axis.
A talk I gave at Web Directions South 2009 about the current possibilities of the HTML5 video element, and its shortfalls in accessibility. Also briefly mentions audio and media fragment URIs. Takes a broad sweep at accessibility and usability features of HTML5 media elements.
Html5, Native and Platform based Mobile ApplicationsYoss Cohen
This presentation compares between different mobile applications techniques: Native, HTML5 and platform based (Flash, JavaFX, Silverlight) as well as review the level of support each alternative has for video.
HTML5 Multimedia: where we are, where we're goingbrucelawson
A much-hyped feature of HTML5 is native multimedia. In this session we’ll look at embedding <audio> and <video> into your pages, and how to make it work cross-browser and degrade gracefully in older browsers. Sound too good to be true? It’s not!
We’ll look at the pros and the cons of HTML5 multimedia and see how to write simple controls with JavaScript. Most excitingly, we’ll also look at how HTML5 builds in support for subtitles and captions for multimedia accessibility. And you might pick up a Turkish dancing tip on the way.
---
Edited version of my Web Directions London talk on 26 May 2011. Slides that don't make sense out of context are removed.
A brief rollerskate along HTML5 multimedia beach, in which we pop into the soda shop of subtitling and the ice-cream parlour of synchronised media, before we incongruously pop into the igloo of JavaScript access to the camera (because I pulled in from slides from another presso after we talked about it in an earlier presentation).
This is the story of the glory and struggle of bringing a high quality YouTube experience to the mobile web. Once upon a time there was a web developer who wanted to play videos on the web. So he filmed a cat and wrote a Flash and a HTML5 player. He spent many hours making it work on his favorite desktop browsers and even the one his grandfather still used. People could watch his cat video, he smiled, and the world was good. Then one day someone put a browser in a phone and soon there were many phones with many different browsers. This new set of environments were even harder to develop for and had a slew of new terrifying bugs. The web developer was miserable knowing people couldn’t watch his cat video. With much time and effort he figured out many of the secrets needed to combat the evils of the different mobile platforms. Once again people could watch his cat video, he smiled, and the world was good. The end.
This is a lightning presentation given by Sean Chung to our team to summarize a presentation he saw at JavaOne 2009. Sean also adds a slight spin to the original presentation by including Adobe Flex as an additional comparison axis.
A talk I gave at Web Directions South 2009 about the current possibilities of the HTML5 video element, and its shortfalls in accessibility. Also briefly mentions audio and media fragment URIs. Takes a broad sweep at accessibility and usability features of HTML5 media elements.
Html5, Native and Platform based Mobile ApplicationsYoss Cohen
This presentation compares between different mobile applications techniques: Native, HTML5 and platform based (Flash, JavaFX, Silverlight) as well as review the level of support each alternative has for video.
HTML5 Multimedia: where we are, where we're goingbrucelawson
A much-hyped feature of HTML5 is native multimedia. In this session we’ll look at embedding <audio> and <video> into your pages, and how to make it work cross-browser and degrade gracefully in older browsers. Sound too good to be true? It’s not!
We’ll look at the pros and the cons of HTML5 multimedia and see how to write simple controls with JavaScript. Most excitingly, we’ll also look at how HTML5 builds in support for subtitles and captions for multimedia accessibility. And you might pick up a Turkish dancing tip on the way.
---
Edited version of my Web Directions London talk on 26 May 2011. Slides that don't make sense out of context are removed.
A brief rollerskate along HTML5 multimedia beach, in which we pop into the soda shop of subtitling and the ice-cream parlour of synchronised media, before we incongruously pop into the igloo of JavaScript access to the camera (because I pulled in from slides from another presso after we talked about it in an earlier presentation).
This is the story of the glory and struggle of bringing a high quality YouTube experience to the mobile web. Once upon a time there was a web developer who wanted to play videos on the web. So he filmed a cat and wrote a Flash and a HTML5 player. He spent many hours making it work on his favorite desktop browsers and even the one his grandfather still used. People could watch his cat video, he smiled, and the world was good. Then one day someone put a browser in a phone and soon there were many phones with many different browsers. This new set of environments were even harder to develop for and had a slew of new terrifying bugs. The web developer was miserable knowing people couldn’t watch his cat video. With much time and effort he figured out many of the secrets needed to combat the evils of the different mobile platforms. Once again people could watch his cat video, he smiled, and the world was good. The end.
JS Days HTML5 Flash and the Battle for Faster Cat VideosGreg Schechter
HTML5; it’s new, it’s awesome, and it’s powerful, but can it take down the champ of video distribution, Flash? Which technology’s got the ability to bring cat video to the next level. This talk will cover the many challenges of both HTML5 and YouTube adapting to change video distribution on the web.
HTML5, Flash, and the Battle For Faster Cat VideosGreg Schechter
HTML5; it's new, it's awesome, and it's powerful, but can it take down the champ of video distribution, Flash. Which technology's got the ability to bring cat video to the next level? This talk covers the many challenges of both HTML5 and YouTube adapting to change video distribution on the web.
Zend con 2016 bdd with behat for beginnersAdam Englander
Learn the basics of behavioral driven development (BDD) with Behat to build high quality and well documented applications. You'll learn how BDD can help you deliver greater business value more efficiently while accurately documenting the functionality of your application along the way. You'll learn how to utilize Behat as your BDD tool. With Behat, you'll create tests for the features in your application by utilizing a natural language syntax called Gherkin backed by PHP code to execute the steps executed in the feature's scenarios.
This will be a hands-on tutorial. You'll learn how to implement BDD for a web application. This will include utilizing Selenium WebDriver for real world multi-browser testing including introductions to Selenium Grid and hosted integration services utilizing Selenium.
'THE AGE OF DATA STREAMING' by DENIS BURYACHKOVSKY at OdessaJS'2020OdessaJS Conf
I will cover the main aspects of preparing media resources and implementation of their streaming using famous approaches of media giants.
I've been interested in this topic because working with media is a great challenge for every web developer.
These are the slides from my "HTML5 Real-TIme and Connectivity" presentation at the San Francisco HTML5 User Group (http://sfhtml5.org). The presentation covers:
Web Origin
Cross Document Messaging (PostMessage)
CORS
XHR Level2
WebSocket
Server-Sent Events (EventSource)
SPDY
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....Gavin Pickin
Vagrant is a great solution for providing all of your devs a standard dev environment, but like all the other great technology out there, you have to learn it, and then implement it.
Not anymore, this session will give you a well used, documented Vagrant Setup, with the flexibility to use it for all of your future dev projects too. Learn how this Vagrant Environment is setup, and how to extend it. Kill the learning curve, and spin it up today.
This setup is being used by several devs, on several projects, and has simple flexibility built in. Drop your repos in the main folder, follow simple conventions, and add a small amount of configuration and be able to spin up your environment in minutes. This setup can configure a simple welcome page, configure the web server and cfml engine mappings, datasources, web server settings per site, host entries, and much more.
As great as this sounds, nothing is ever perfect, learn how some assumptions left me looking silly, and owing another developer a meal, and how I resolved that issue and made this vagrant setup even better.
Structure your Play application with the cake pattern (and test it)yann_s
A challenge during the development of an application is how to add new functions without compromising existing ones.
Using the Cake Pattern, the application can be structured into logical components, thus minimizing the coupling between them and controlling the effects of changes.
You will learn what this pattern is, and how to introduce it step by step in a Play Application. You will be shown how an application designed that way is easy to test, especially with the Play testing API.
Finally, the talk will describe the common pitfalls of the Cake Pattern and how to avoid them.
Video of the talk: http://www.ustream.tv/recorded/42775808
Sources: https://github.com/yanns/TPA
Sources of the final version: https://github.com/yanns/TPA/tree/master/frontend/TBA_05_final
Alberto Gonzalez Trastoy, was among the speakers at Agora’s Real-Time Engagement 2020 Conference. His presentation was about what makes building a live video application more complicated than a regular web app. Isn’t WebRTC supposed to handle everything for you? Alberto describes some of the unexpected nuances and challenges a web developer may encounter building real-time engagement and communications applications. This includes networking, interoperability, scalability and security. He also discusses other complexities in building WebRTC applications and offers tools and alternatives to solve them.
JS Days HTML5 Flash and the Battle for Faster Cat VideosGreg Schechter
HTML5; it’s new, it’s awesome, and it’s powerful, but can it take down the champ of video distribution, Flash? Which technology’s got the ability to bring cat video to the next level. This talk will cover the many challenges of both HTML5 and YouTube adapting to change video distribution on the web.
HTML5, Flash, and the Battle For Faster Cat VideosGreg Schechter
HTML5; it's new, it's awesome, and it's powerful, but can it take down the champ of video distribution, Flash. Which technology's got the ability to bring cat video to the next level? This talk covers the many challenges of both HTML5 and YouTube adapting to change video distribution on the web.
Zend con 2016 bdd with behat for beginnersAdam Englander
Learn the basics of behavioral driven development (BDD) with Behat to build high quality and well documented applications. You'll learn how BDD can help you deliver greater business value more efficiently while accurately documenting the functionality of your application along the way. You'll learn how to utilize Behat as your BDD tool. With Behat, you'll create tests for the features in your application by utilizing a natural language syntax called Gherkin backed by PHP code to execute the steps executed in the feature's scenarios.
This will be a hands-on tutorial. You'll learn how to implement BDD for a web application. This will include utilizing Selenium WebDriver for real world multi-browser testing including introductions to Selenium Grid and hosted integration services utilizing Selenium.
'THE AGE OF DATA STREAMING' by DENIS BURYACHKOVSKY at OdessaJS'2020OdessaJS Conf
I will cover the main aspects of preparing media resources and implementation of their streaming using famous approaches of media giants.
I've been interested in this topic because working with media is a great challenge for every web developer.
These are the slides from my "HTML5 Real-TIme and Connectivity" presentation at the San Francisco HTML5 User Group (http://sfhtml5.org). The presentation covers:
Web Origin
Cross Document Messaging (PostMessage)
CORS
XHR Level2
WebSocket
Server-Sent Events (EventSource)
SPDY
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....Gavin Pickin
Vagrant is a great solution for providing all of your devs a standard dev environment, but like all the other great technology out there, you have to learn it, and then implement it.
Not anymore, this session will give you a well used, documented Vagrant Setup, with the flexibility to use it for all of your future dev projects too. Learn how this Vagrant Environment is setup, and how to extend it. Kill the learning curve, and spin it up today.
This setup is being used by several devs, on several projects, and has simple flexibility built in. Drop your repos in the main folder, follow simple conventions, and add a small amount of configuration and be able to spin up your environment in minutes. This setup can configure a simple welcome page, configure the web server and cfml engine mappings, datasources, web server settings per site, host entries, and much more.
As great as this sounds, nothing is ever perfect, learn how some assumptions left me looking silly, and owing another developer a meal, and how I resolved that issue and made this vagrant setup even better.
Structure your Play application with the cake pattern (and test it)yann_s
A challenge during the development of an application is how to add new functions without compromising existing ones.
Using the Cake Pattern, the application can be structured into logical components, thus minimizing the coupling between them and controlling the effects of changes.
You will learn what this pattern is, and how to introduce it step by step in a Play Application. You will be shown how an application designed that way is easy to test, especially with the Play testing API.
Finally, the talk will describe the common pitfalls of the Cake Pattern and how to avoid them.
Video of the talk: http://www.ustream.tv/recorded/42775808
Sources: https://github.com/yanns/TPA
Sources of the final version: https://github.com/yanns/TPA/tree/master/frontend/TBA_05_final
Alberto Gonzalez Trastoy, was among the speakers at Agora’s Real-Time Engagement 2020 Conference. His presentation was about what makes building a live video application more complicated than a regular web app. Isn’t WebRTC supposed to handle everything for you? Alberto describes some of the unexpected nuances and challenges a web developer may encounter building real-time engagement and communications applications. This includes networking, interoperability, scalability and security. He also discusses other complexities in building WebRTC applications and offers tools and alternatives to solve them.
Pequeña introducción al uso de los Frameworks CSS.
Desde la problemática al desarrollo CSS al empleo de algunos frameworks (1kb CSS Grid, 960.gs, Blueprint, Foundation y Bootstrap) como mejora de la productividad.
In this tutorial we take you through creating several simple custom components
from scratch using Java Swing as the implementation platform. It is hoped that readers
will get a better understanding of the MVC architecture from this document as well as
find within it a cook-book for creating MVC style custom GUI components for Java
Swing.
These slides were presented at the Streaming Media West conference in 2016. This talk is also a reference to the blog post "Using Microservices to Encode and Publish Videos at The New York Times" at The New York Times Open blog.
- Streaming Media West 2016: http://streamingmedia.com/Conferences/West2016/
- Open Blog:
http://open.blogs.nytimes.com/2016/11/01/using-microservices-to-encode-and-publish-videos-at-the-new-york-times/
A lecture given at MIT in Boston about the benefits and technicalities of open web standards for Video and Audio. Lots of examples how to manipulate live video using CSS3 and Canvas.
Building a Video Encoding Pipeline at The New York TimesFlávio Ribeiro
These slides were presented on the Streaming Media West conference in 2016. This talk is also a reference for the blog post "Using Microservices to Encode and Publish Videos at The New York Times" at The New York Times Open blog.
- Streaming Media West 2016: http://streamingmedia.com/Conferences/West2016/
- Open Blog: http://open.blogs.nytimes.com/2016/11/01/using-microservices-to-encode-and-publish-videos-at-the-new-york-times/
HTML5 video & Amazon elastic transcoder - FCIP August 2014RZasadzinski
An intro to implementing HTML5 video in HTML files, as well as using the WordPress short code to embed HTML5 video. A brief description of the Flash approach that still works better for transparent video, and how to embed that Flash content with SWFObject 2 and include fallback content using the HTML5 video techniques covered. This allows use of Flash for video with a transparent background for all users & browsers that have Flash installed, and uses an HTML5 fallback for devices and users that don't have an appropriate version of the Flash Player installed.
A few key items are also listed with regard to using Amazon's Elastic Transcoder to convert videos into the needed formats for HTML5 video.
Intro to Compression: Audio and Video Optimization for LearningNick Floro
Learn how to compress audio and video for delivery to desktop and mobile devices today. Learn how to use HTML5 and Flash as well as best practices from editing, compression and delivery of content.
Craft 2019 - “The Upside Down” Of The Web - Video technologiesMáté Nádasdi
Video technologies are "The Upside Down” of the web for sure. Being a frontend engineer writing HTML5 video players, WebRTC broadcast clients, supporting 360/VR videos or maybe writing interactive movies like Bandersnatch is just like to live in a parallel universe where everything and nothing is the same. Working with video is an exciting combination of all the trendy stuff out there like new Web APIs, ByteArrays, Workers, WebRTC, WebGL, etc.
In this talk, Mate would like to share important insights of video specific frontend engineering nowadays. The purpose of sharing this adventure is to give you some sense of this universe, to explain how a web video player works, to talk about the key layers and challenges and to point out that every frontend engineer has the power in their hands to utilize this knowledge to boost the user experience in any kind of product.
WebRTC doesn't require every endpoint to show the same user interface. In our experience, specialised user interaction needs specialised user interface configuration.
In this presentation we reported on several customer trials with asymmetrical user interfaces in Telehealth.
Presentation at WebRTC Summit / IoT conference http://webrtcsummit.net/ .
Focus on the peer-to-peer nature of WebRTC and what applications may get built using that new paradigm on the Web.
How to successively scale a social media campaign - great slide extracted from http://www.slideshare.net/montelutz/social-pulpit-barack-obamas-social-media-toolkit .
Nsw Public Sphere1: Video for Politicians and GovernmentSilvia Pfeiffer
These are my slides for the Hon Penny Sharpe's first NSW Public Sphere event. I talk about the importance of video as part of an online engagement platform both for politicians and government agencies. There are statistics on how many Australian politicians have a YouTube channel, how many channel/video views we have, I look at the situation in NSW for politicans and government with video, and I point out that there are new open standards and open platforms that can be used.
Public Sphere3: ICT innovation is easy - commercialisation is hardSilvia Pfeiffer
At the recent Public Sphere #3 organised by Senator Kate Lundy, I gave this presentation to provide a view on what startups go through to turn an innovation into a product and why Australia can be a really hard place to do this.
Open Video Conference: HTML and the video tagSilvia Pfeiffer
Slides that were prepared together by all the participants of the "HTML5 and <video> tag" panel at the Open Video Conference, 20th June 2009. Participants: Philip Jagenstedt from Opera, Jan Gerber from Xiph, Viktor Gal from Annodex, Michael Dale from Metavid, Eric Carlson from Apple, and Silvia Pfeiffer from Annodex/Xiph.
Slides used in Vquence's VQmetrics launch 19th March 2009. Vquence provides technology and consultancy on social video, which is video published through social networks. In particular, the VQmetrics SaaS system helps customers keep track of their videos across multiple sites and aggregate/segment results appropriately.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
Search and Society: Reimagining Information Access for Radical Futures
Html5 Open Video Tutorial
1. Tutorial: HTML5 video
How to process and publish
video in an open format
Silvia Pfeiffer, Jan Gerber, Michael Dale
2. Outline
Part 1: Basics
• Setup
• State of Standardisation
• Mediawiki/mwEmbed demo
• Editing
• Publish a HTML5 video
• <video> Javascript API
• Skinning
• Tinyvid.tv demo
3. Outline
Part 2: Experts
• Transcoding
• Cross-Platform publishing
• Pad.ma demo
• Setting up a Site
• Accessibility
• In-browser video editing
• Other HTML5 video demos
5. Setup
• Ogg tools: oggz-tools, oggvideotools
https://launchpad.net/~theora/+archive/ppa
• Web Server: Apache
• Web Browser: Firefox 3.6+, Opera 10.10
https://launchpad.net/~ubuntu-mozilla-daily/+archive/ppa
• Firefogg: http://firefogg.org/
• Firebug: http://getfirebug.com
• Video Player: vlc, mplayer, totem, or xine
• Video Editor: pitivi or kino
Get content:
http://mirror.conf.lca2010.org.nz/lca-html5-tut-videos.tar.gz
6. State of Standardisation
• HTML5 video and audio elements:
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html
• Media Fragments URI:
http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/
• Media Annotations API:
http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html
• Timed Text: DFXP
http://www.w3.org/TR/ttaf1-dfxp/
7. Codecs in HTML5 Browsers
• Ogg Theora/Vorbis:
▫ Firefox 3.5+ (liboggplay)
▫ Chrome (ffmpeg)
▫ Opera (gstreamer)
• MPEG-4 H.264/AAC:
▫ Safari (QuickTime)
▫ Chrome (ffmpeg)
▫ Opera (gstreamer on Linux)
8. Statistics of Browser support
• Ogg support through HTML5: 26.66% =
21.4% (FireFox3.5+) + 5.26 (Chrome3.0+)
• Ogg support through Cortado – Java plugin:
90%
• Adobe Flash Browser plugin: 99%
• Microsoft Silverlight Browser plugin: 48%
• QuickTime Browser plugin: 15%
9. State of Standardisation
• HTML5 video and audio elements:
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html
• Media Fragments URI:
http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/
• Media Annotations API:
http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html
• Timed Text: DFXP
http://www.w3.org/TR/ttaf1-dfxp/
10. Media Fragments URI
Temporal:
• http://www.example.com/video.ogv#t=10,20
Live streaming:
• http://www.example.com/video.ogv#t=clock:
2009-07-26T11:19:01Z,2009-07-26T11:20:01Z
Rectangular region:
• http://www.example.com/video.ogv#xywh=
160,120,320,240
Track selection:
• http://www.example.com/video.ogv #track=„video‟
11. State of Standardisation
• HTML5 video and audio elements:
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html
• Media Fragments URI:
http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/
• Media Annotations API:
http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html
• Timed Text: DFXP
http://www.w3.org/TR/ttaf1-dfxp/
12. MediaAnn: API for metadata
object[] getProperty(
in DOMString propertyName,
in optional DOMString sourceFormat,
in optional DOMString subtype,
in optional DOMString language,
in optional DOMstring fragment );
14. State of Standardisation
• HTML5 video and audio elements:
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html
• Media Fragments URI:
http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/
• Media Annotations API:
http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html
• Timed Text: DFXP
http://www.w3.org/TR/ttaf1-dfxp/
15. W3C Timed Text
DFXP: Distribution Format Exchange Profile
<tt xml:lang="" xmlns="http://www.w3.org/2006/10/ttaf1">
<head>
<metadata/>
<styling/>
<layout/>
</head>
<body region="subtitleArea">
<div>
<p xml:id="subtitle1" begin="0.76s" end="3.45s">It seems a
paradox, does it not,</p>
<p xml:id="subtitle2" begin="5.0s" end="10.0s">that the image
formed on<br/>the Retina should be inverted?</p>
</tt>
16. Reminder: Setup
• Ogg tools: oggz-tools, oggvideotools
https://launchpad.net/~theora/+archive/ppa
• Web Server: Apache
• Web Browser: Firefox 3.6+, Opera 10.10
https://launchpad.net/~ubuntu-mozilla-daily/+archive/ppa
• Firefogg: http://firefogg.org/
• Firebug: http://getfirebug.com
• Video Player: vlc, mplayer, totem, or xine
• Video Editor: pitivi or kino
Get content:
http://mirror.conf.lca2010.org.nz/lca-html5-tut-videos.tar.gz
18. Editing
• Kino or pitivi – take DV input, write Ogg
▫ Run kino on DVD_VR2.vob.dv
▫ Cut a small segment
▫ Export to Ogg
▫ Test in vlc, mplayer, or xine
19. Prepare an Ogg Video
• dvdrip, vobcopy – for DVDs to extract to DV (for
editing) or mpeg
• Thoggen – for DVDs to extract to Ogg Theora
• dvgrab – for grabbing DV from a camera
• oggSlideshow was used for foms2009.ogv
• FFMpeg, ffmpeg2theora – transcode to Ogg
▫ Go to http://firefogg.org/make/ and transcode
DougSchepers-W3C.mp4 or ninja_gameplay.mp4
• oggThumb, totem – get poster image
20. Prepare a Web page: page1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>W3C News</title>
</head>
<body>
<h2>Doug Schepers: W3C and Twitter</h2>
<video src="DougSchepers-W3C.ogv"
poster="DougSchepers-W3C.png" controls>
<p>Your browser does not support HTML5
Ogg video.</p>
</video>
</body>
</html>
21. Publish Page
• Upload page1.html to apache
▫ Copy page1.html to /var/www/
▫ Make sure, Web server serves .ogv as video/ogg
mime type out of /etc/mime.types
• Test in Firefox
▫ http://localhost/page1.html
22. Server improvements
• Improve speed:
• create .htaccess file with:
<Files "DougSchepers-W3C.ogv">
Header set X-Content-Duration “55.48"
</Files>
• Use oggz-info to find out duration
• Improve seeking:
• Install oggz-chop and set it up as cgi script
ScriptAlias /oggz-chop /usr/bin/oggz-chop
Action video/ogg /oggz-chop
23. Publish in Ogg and MP4: page2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>W3C News</title>
</head>
<body>
<h2>Doug Schepers: W3C and Twitter</h2>
<video poster="DougSchepers-W3C.png" controls>
<source src="DougSchepers-W3C.ogv" type="video/ogg" />
<source src="DougSchepers-W3C.mp4" type="video/mp4" />
<p>Your browser does not support HTML5 Ogg video.</p>
</video>
</body>
</html>
Test in Safari/Webkit on Mac to play the MP4
24. Javascript API of <video>
• API functions:
▫ v = new Video([url]);
▫ void load();
▫ void play();
▫ void pause();
• Attributes e.g.:
▫ DOMString src / currentSrc
▫ float currenttime
▫ float volume
▫ boolean muted
• skinning
25. Skinned video player examples
http://www.annodex.net/~ http://openvideo.daily-
silvia/itext/elephant_wi motion.com/video/xbqpad_w
th_skin.html allys-happy-place_fun
32. Cross-Platform Video Publishing
• Ogg works out of the box on
▫ Firefox 3.5+
▫ Opera (latest beta 10.50)
▫ Chrome 3.0+
• Safari: install XiphQT or use cortado
• IE: use cortado or vlc plugin (ActiveX control in
development)
33. Cortado Fallback: page3.html
<video src="big_buck_bunny_480p_stereo.ogv"
controls width="854" height="480">
<applet
code="com.fluendo.player.Cortado.class"
archive="http://theora.org/cortado.jar"
width="854" height="480">
<param name="url"
value="big_buck_bunny_480p_stereo.ogv"/>
<param name="duration" value="596.458"/>
</applet>
</video>
Run in IE on Windoze.
34. Quicktime/Flash fallback
• Video for Everybody
▫ Ogg
▫ Mp4
▫ QuickTime plugin
▫ Flash plugin
▫ Error message
• No Javascript necessary
36. Javascript Video Tag Rewrite
Use ogv & mp4 video
• Video4All: JS library
• Flash fallback
• mwEmbed: JS library
▫ Cortado, vlc
▫ Flash Fallback with Kaltura player
▫ ROE use
▫ Skinning with jQuery-ui
▫ Subtitle support
39. Setting up a Video Hosting Site
• Cost of hosting video - consider:
▫ Storage cost
▫ Application sw: e.g. videobin.org, mediawiki
▫ Application integration with CMSes
▫ http://drupal.org/project/video
▫ videopress
▫ implement modules!
▫ Bandwidth needs
▫ Transcoding CPU needs
41. Firefogg: page6.html
• Encoding and uploading at the same time, or
• Sending a multipart POST request once
encoding is done
Nicer interface with progressbar: page7.html
42. <script type="text/javascript">
var ogg = new Firefogg();
function transcode () {
if(ogg.selectVideo()) {
var options = JSON.stringify({'maxSize': 320, 'videoBitrate':
500});
ogg.encode(options);
document.getElementById('message').innerHTML="please wait";
var transcodeStatus = function() {
if(ogg.state == 'encoding') {
setTimeout(transcodeStatus, 500);
} else if (ogg.state == 'encoding done') {
document.getElementById('message').innerHTML=“finished";
}
}
transcodeStatus();
}
return false;
}
</script>
<p id="message"></p>
<a href="#" onclick="javascript:transcode()" >transcode file</a>
43. Accessibility
• Player keyboard access
▫ Tabbing
▫ Space
▫ Left/Right arrow (5 sec)
▫ Ctl-Left/Ctl-Right arrow (60sec)
▫ Home-Left/Home-Right (beginning/end)
▫ Volume up / down arrows
44. Captions/Subtitles:
srt example
1
00:00:15,000 --> 00:00:17,951
At the left we can see...
2
00:00:18,166 --> 00:00:20,083
At the right we can see the...
3
00:00:20,119 --> 00:00:21,962
...the head-snarlers
http://www.annodex.net/~silvia/itext/elephants_dream/elephant.engl
ish-utf8.srt
49. Ogg Kate
• Encapsulated text in Ogg
• ffmpeg2theora or kateence/oggz-merge:
▫ Run “kateenc -t elephants_dream_1024.srt -l en -
c SUB -o elephants_dream_1024.ogx”
▫ Run “oggz-merge elephants_dream_1024.ogx
elephants_dream_1024.ogv -o
elephants_dream_1024_merged.ogv”
Demo: Firefox with Kate support (hack)
50. Ogg Theora with Kate in Cortado
<applet
code="com.fluendo.player.Cortado.class"
archive="cortado.jar"
width="512" height="288">
<param name="url" value="video.ogv"/>
<param name="kateLanguage" value="en">
</applet>
page8.html – test in IE on Win
http://people.xiph.org/~oggk/elephants_dream/elephantsdream.html
51. In-Browser HTML5 video editing
http://sandbox.kaltura.com/testwiki/js2/mwEmb
ed/example_usage/Sequence_Editor.html
52. Other HTML5 Demos
• Video and SVG:
▫ http://www.double.co.nz/video_test/video.svg
▫ http://people.mozilla.com/~prouget/demos/DynamicContentInj
ection/play.xhtml
• Video and CSS Transforms:
▫ http://www.zachstronaut.com/lab/isocube.html
▫ http://people.mozilla.com/~prouget/demos/round/index.xhtml
▫ http://hacks.mozilla.org/2009/07/video-more-than-just-a-tag/
• Replace background with image
▫ http://people.mozilla.com/~prouget/demos/green/green.xhtml