From Streaming Media West Conference
Huntington Beach, CA
November 2013
C202: HOW TO: Making the HTML5 Video Element Interactive
The HTML5 Video element has now become widely used by browsers and supported in a broad set of websites for streaming video content. With some JavaScript and CSS, we can leverage the HTML video element to create highly interactive experiences for the viewer in both traditional and mobile browsing environments. This hands-on session explores the integration of events with the video timeline, creating positioned hotspots with links and dynamic content, and capturing user input. In addition, the session examines supporting mobile platform browsers along with future opportunities with the HTML5 video tag. Get sample code, ideas, and best practices for making the HTML5 video element an engaging interactive experience for your viewers.
Speaker: Chuck Hudson, Co-Author, HTML5 Developer's Cookbook
In this lecture, I provide an overview of what it takes to create amazing Web Apps : rich media, the Canvas API, local storage and offline persistence are covered.
Slides from my talk discussing my experience rebuilding a video player I previously developed in Flash. I gave this talk on March 18th, at the Brisbane Web Design Meetup.
In this lecture, I provide an overview of what it takes to create amazing Web Apps : rich media, the Canvas API, local storage and offline persistence are covered.
Slides from my talk discussing my experience rebuilding a video player I previously developed in Flash. I gave this talk on March 18th, at the Brisbane Web Design Meetup.
An overview of video for the mobile web with a "lean startup" case study about how supporting web video on mobile had both expected and unexpected positive effects on Mightyverse metrics.
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.
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010Patrick Lauke
Part II of the standards-next.org workshop on HTML5 with Bruce Lawson, concentrating on audio, video and canvas (plus hints of additional HTML5 API niceness)
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
Slides apresentados no 16 EDTED, edição Rio de Janeiro, em 21 de Maio de 2011.
Aqui não tem vídeos, animações e códigos apresentados, mas tem os links. Logo passo o link completo.
Uma breve descrição sobre o HTML 5 e suas principais características como: forms, a nova estrutura, aúdio e vídeo, etc.
An overview about HTML 5 and its main features such as: forms, new structure, audio and video, etc.
An overview of DojoX GFX and DojoX Drawing, and the underlying technology that uses SVG and VML to provide vector-based graphics cross-browser without the use of Flash.
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!
This presentation is an introduction to the new features of
HTML5. The main elements of this document are:
* Brief history of HTML5
*The improvements
* Browser support
* Semantic elements
* Content Editable on pages
* Video Tag
* Canvas tag
* Local storage
* Geolocation API
* Offline applications
* Microdata
* Use cases
An overview of video for the mobile web with a "lean startup" case study about how supporting web video on mobile had both expected and unexpected positive effects on Mightyverse metrics.
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.
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010Patrick Lauke
Part II of the standards-next.org workshop on HTML5 with Bruce Lawson, concentrating on audio, video and canvas (plus hints of additional HTML5 API niceness)
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
Slides apresentados no 16 EDTED, edição Rio de Janeiro, em 21 de Maio de 2011.
Aqui não tem vídeos, animações e códigos apresentados, mas tem os links. Logo passo o link completo.
Uma breve descrição sobre o HTML 5 e suas principais características como: forms, a nova estrutura, aúdio e vídeo, etc.
An overview about HTML 5 and its main features such as: forms, new structure, audio and video, etc.
An overview of DojoX GFX and DojoX Drawing, and the underlying technology that uses SVG and VML to provide vector-based graphics cross-browser without the use of Flash.
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!
This presentation is an introduction to the new features of
HTML5. The main elements of this document are:
* Brief history of HTML5
*The improvements
* Browser support
* Semantic elements
* Content Editable on pages
* Video Tag
* Canvas tag
* Local storage
* Geolocation API
* Offline applications
* Microdata
* Use cases
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...Edureka!
** Machine Learning Engineer Masters Program: https://www.edureka.co/masters-program/machine-learning-engineer-training **
This tutorial on Artificial Intelligence gives you a brief introduction to AI discussing how it can be a threat as well as useful. This tutorial covers the following topics:
1. AI as a threat
2. What is AI?
3. History of AI
4. Machine Learning & Deep Learning examples
5. Dependency on AI
6.Applications of AI
7. AI Course at Edureka - https://goo.gl/VWNeAu
For more information, please write back to us at sales@edureka.co
Call us at IN: 9606058406 / US: 18338555775
Facebook: https://www.facebook.com/edurekaIN/
Twitter: https://twitter.com/edurekain
LinkedIn: https://www.linkedin.com/company/edureka
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.
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!Christopher Schmitt
Although the specification is still being written, HTML5 can be implemented on your website today. Get an overview of the new HTML elements and their semantics, learn how to incorporate audio and video without Flash, get acquainted with new JavaScript APIs (like geolocation), and more.
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
Mobile applications Development - Lecture 10
HTML5 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
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.
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.
Similar to Making the HTML5 Video element interactive (20)
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.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
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.
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.
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™UiPathCommunity
In questo evento online gratuito, organizzato dalla Community Italiana di UiPath, potrai esplorare le nuove funzionalità di Autopilot, il tool che integra l'Intelligenza Artificiale nei processi di sviluppo e utilizzo delle Automazioni.
📕 Vedremo insieme alcuni esempi dell'utilizzo di Autopilot in diversi tool della Suite UiPath:
Autopilot per Studio Web
Autopilot per Studio
Autopilot per Apps
Clipboard AI
GenAI applicata alla Document Understanding
👨🏫👨💻 Speakers:
Stefano Negro, UiPath MVPx3, RPA Tech Lead @ BSP Consultant
Flavio Martinelli, UiPath MVP 2023, Technical Account Manager @UiPath
Andrei Tasca, RPA Solutions Team Lead @NTT Data
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
2. CANVAS
OVERLAYS
CUES
TIMELINE
CANVAS AND VIDEO BINDING
DIGGING DEEP INTO CUES
TRACK META
META DATA TRACK USAGE
HTML5 Interactive Video • November 20, 2013
PLACING CONTROLS OVER
CONTROLLING TIME
SUBTITLES
LEVERAGING SUBTITLES
2
42
3. WHAT IS INTERACTION
FOR WHAT PURPOSE?
• Supplemental information on demand – hotspots, Ajax info.
• Enhanced navigation possibilities – menu, bookmarks, thumbnailing.
• Validating knowledge retention – inline quizzes.
• V-commerce – item in context viewing.
• Improved story telling opportunities.
• More engaging user experiences.
• Incorporation of social networking.
HTML5 Interactive Video • November 20, 2013
3
42
4. CROSS ORIGIN ERRORS
In the examples provided multiple files will be used
including text track files. These files must be served from
the same origin as the video media files to prevent
browser cross origin errors.
HTML5 Interactive Video • November 20, 2013
4
42
5. <VIDEO>
BASIS OF THE INTERACTIONS
HTML5 Interactive Video • November 20, 2013
5
42
6. HTML5 VIDEO ELEMENT
REFRESH
• Added in HTML5 to mainstream media video playback with out plugins.
• Built in controls available.
• Multiple sources to provide various browser support.
• Fallback messaging allowed for unsupported browsers.
<video controls>!
<source src="/video/big_buck_bunny_480p_surround.avi" type='video/mp4’>!
<source src="/video/big_buck_bunny_480p_stereo.ogg" type='video/ogg’>!
<p>HTML5 Video is not supported by this browser.</p>!
</video>!
HTML5 Interactive Video • November 20, 2013
6
42
7. DIGGING DEEP
GOING TO THE EDGE
HTML5 Video structures
are still young.
As we dig deeper this will
be more and more evident.
Present inconsistencies will
be noted.
Browsers of course have
various degrees of support
as we go deeper.
VIDEO
TRACKS
CUES
WATCH THAT LAST STEP…
HTML5 Interactive Video • November 20, 2013
7
42
9. OVERLAYING HTML ELEMENTS
BASIC ELEMENTS
• Leverage CSS position to place elements.
• Canvas an option as well.
• Provides for interactions
– While video loading.
– During playback or timeline navigation.
<div>
– When play ends.
• Can overlay entire video element or partial.
HTML5 Interactive Video • November 20, 2013
<video>
9
42
12. VIDEO API EVENTS & PROPERTIES
SMALL BUT KEY SUBSET
• Key events
play
Video is played.
pause
Video playback is paused.
ended
Video playback has ended.
timeupdate
Video currentTime is updated.
• Properties Include
– currentTime – read/write of the playing pointer on the video media.
HTML5 Interactive Video • November 20, 2013
12
42
13. TIMELINE METHOD / EVENTS
A SAMPLE FLOW
Get currentTime
Returns the current pointer time
Set currentTime
Moves the play pointer
00:00:00:000
Ended event fired
autoplay
Play event fired
pause()
Pause event fired
play()
Play event fired
• Methods and current time fired automatically or manually.
HTML5 Interactive Video • November 20, 2013
13
42
14. TIMEUPDATE EVENT
SYNCHRONIZING WITH THE TIMELINE
• timeupdate fired when currentTime updated.
• By definition;
– Continually fired while media playing.
– Current media position adjusted.
– Frequency not specified or guaranteed.
• In practice, events fires several times per second.
video.addEventListener(’timeupdate', function() {!
console.log(“currentTime = “ + video.currentTime);!
}, false);!
HTML5 Interactive Video • November 20, 2013
14
42
15. EXAMPLE: TIMELINE CONTROL
A DVD style content menu controlling current time and
using overlay actions.
HTML5 Interactive Video • November 20, 2013
15
42
17. TRACK ELEMENT OVERVIEW
SUBELEMENT TO MEDIA
• Track elements are added under the video element.
• Can have multiple tracks for a single video element.
<video controls>!
<source id='mp4' src="/video/trailer.mp4" type='video/mp4’>!
<track kind="subtitles" label="English" src="subtitles_en.vtt" srclang="en" default>!
<track kind="subtitles" label="Italiano" src="subtitles_it.vtt" srclang="it”>!
This browser does not support HTML5 video.!
</video>!
• Tracks accessible by element id attribute or textTracks array.
var allTracks = document.getElementById("sampleVideo").textTracks;!
HTML5 Interactive Video • November 20, 2013
17
42
18. TRACK ELEMENT
ELEMENT TAG
• Track element attributes
– Kind
The kind of track included.
– Src
The source file of the track.
– Srclang
Two letter designation for language.
– Label
User readable label for the text track.
– Default
Default text track designation for use.
• Can be referenced with the id attribute
• Multiple tracks with different kind attributes allowed.
• http://www.w3.org/wiki/HTML/Elements/track
HTML5 Interactive Video • November 20, 2013
18
42
19. 5 KINDS OF TEXT TRACKS
TYING INFORMATION TO VIDEO
SUBTITLES
transcription or
translation of the
dialogue, suitable for
when the soundtrack
is unavailable.
CAPTIONS
transcription or
translation of the
dialogue, sound
effects, relevant
musical cues, and
other relevant audio
information, suitable
for when the
soundtrack is
unavailable.
HTML5 Interactive Video • November 20, 2013
DESCRIPTIONS
CHAPTERS
METADATA
Textual descriptions
of the video
component of the
media resource,
intended for audio
synthesis when the
visual component is
unavailable.
Chapter titles,
intended to be used
for navigating the
media resource.
Tracks intended for
use from script.
19
42
20. TRACK FILES
WEB VIDEO TEXT TRACKS (VTT)
• Mark up layout for text track information.
• Each subtitle cue separated by a blank line.
• Closed captioning when on supersedes subtitles.
• W3C Specification for WebVTT http://dev.w3.org/html5/webvtt/.
WEBVTT FILE INCLUSION
Since the browser is including the WebVTT for the track the
WebVTT must be served from a web server the file cannot be read
from a file:// directive.
HTML5 Interactive Video • November 20, 2013
20
42
21. TRACK FILE FORMAT
VTT FILE STRUCTURE
• Header statement
• Individual Cues
– An identifier
– Start to end time
– Text for cue
WEBVTT FILE!
Subtitle1!
00:00:11.000 --> 00:00:14.000!
Cosa ti porta nella terra dei guardiani?!
Subtitle2!
00:00:18.000 --> 00:00:20.000!
Sto cercando qualcuno.!
Subtitle3!
00:00:36.000 --> 00:00:40.000!
Una pericolosa missione per un cacciatore solitario.!
CUE TIME FORMAT
Time format is critical to proper parsing of the VTT file. If a
start or end time is incorrectly structured such as 00:00:9:000
the behavior is indeterminate. Eg. Chrome will skip this cue.
HTML5 Interactive Video • November 20, 2013
21
42
22. SUBTITLE TRACKS
TIMELINE COORDINATION
• One or more cues handled automatically by html5 player.
• Cues contain an id, start time, end time, and text.
cue1
cue2
startTime 00:01:250
endTime 00:03:250
00:01:000
00:02:000
00:03:000
Cue1 text
displayed
HTML5 Interactive Video • November 20, 2013
startTime 00:05:000
endTime 00:08:000
00:04:000
00:05:000
00:06:000
00:07:000
00:08:000
00:09:000
Cue2 text
displayed
22
42
23. EXAMPLE: SIMPLE SUBTITLES
Localized subtitles for videos using subtitle tracks.
Testing via default attribute.
HTML5 Interactive Video • November 20, 2013
23
42
24. VIDEO LOADEDMETADATA EVENT
WHEN ARE TRACKS AVAILABLE
• Fired when track sources all loaded.
• Track sources are loaded asynchronously.
• Not included in the window load event.
• Must set separate event listener for loadedmetadata!
video.addEventListener('loadedmetadata', function () {
!
!
!// Perform functions on video here.!
}, false);!
HTML5 Interactive Video • November 20, 2013
24
42
25. TRACK MODE
SETTING TRACK VISIBILITY
• The track visibility is set through the mode property.
Disabled
Text track is disabled for the video element.
Hidden
Text track is hidden from being shown.
Showing
Text track is currently being used to show.
HTML5 Interactive Video • November 20, 2013
25
42
26. EXAMPLE: CHANGING TRACKS
Allowing the user to select their language of subtitles.
Leverages pulling all tracks, kind, and mode.
HTML5 Interactive Video • November 20, 2013
26
42
28. METADATA TRACKS
LEVERAGING JAVASCRIPT
• Metadata track cues not shown by video player.
• Many potential uses choreographing functionality.
<video>!
<source …>!
…!
<track kind="metadata" label=”Quiz Cues" src=“quiz-metadata-en.vtt" default>!
</video>!
METADATA TRACK LOADING
To have a metadata track loaded the default attribute must
be used in the <track> element.
HTML5 Interactive Video • November 20, 2013
28
42
29. METADATA TRACKS
JSON INSIDE CUES
• Text field can include complex data.
• Read like normal text property and then parsed.
Bubble1!
00:00:05.000 --> 00:00:09.000!
{!
"title":"Fingerless Gloves",!
"text":"Madonna made it fashionable to wear fingerless gloves,
also called Glovelettes, in the 1980s with the record cover
photo for Like a Virgin.",!
"xpos":"450px",!
"ypos":"350px”!
}!
• But first need to be able to grab each cue.
HTML5 Interactive Video • November 20, 2013
29
42
31. CUES
CUE OBJECT STRUCTURE
• Cues accessed as array fromtextTrack object.
• Properties of each cue can be accessed or modified.
for (var cueIdx = 0; cueIdx < textTrack.cues.length; cueIdx++) {!
console.log(”Cue id:” + textTrack.cues[cueIdx].id);!
…!
}!
id
The id of the specific cue.
startTime
Start time as defined by cue.
endTime
End time as defined by cue.
text
HTML5 Interactive Video • November 20, 2013
Text description of cue.
31
42
32. TRAPPING CUE EVENTS
TWO METHODS TO CATCH CUE CHANGES
• Cue events
– enter
!(onenter)
fired when a cue is entered.
– exit
!(onexit)
fired when a cue is exited.
• Text track cuechange (oncuechange).
– Fired whenever the list of active cues changes.
textTrack.oncuechange = function (){…};!
– oncuechange appears to be more reliable than cuechange!
HTML5 Interactive Video • November 20, 2013
32
42
33. TRAPPING CUE EVENTS
TWO METHODS TO CATCH CUE CHANGES
• activeCues array of one or more active cues.
• If activeCues length is zero when cuechange fired then exiting cue.
console.log(textTrack.activeCues[0].id);!
CUE EVENT RELIABILITY
Cue events are known to be problematic with inconsistent
behaviors (events not firing, events ceasing to fire).
HTML5 Interactive Video • November 20, 2013
33
42
34. EXAMPLE: BUBBLES
Using cue events and cuechange to effect the famous
music video pop up bubbles.
Fraught with trouble. Don’t look down and step away from the
edge.
HTML5 Interactive Video • November 20, 2013
34
42
35. EXAMPLE: BUBBLES NEW
Using what we know with timeline update events to create
a bubble solution.
HTML5 Interactive Video • November 20, 2013
35
42
36. TRACKS ON THE FLY
CREATING TRACKS AND CUES
• In JS can also add a new text track.
• addTextTrack takes the kind, label and option language code.
newTextTrack = myVideo.addTextTrack('chapters','bookmarks');!
newTextTrack.default = true;
!!
• New cues added with addCue(cue).
var newCue = new TextTrackCue(startTime, endTime, ’label');!
newCue.id = 'bookmark1’;!
newCue.pauseOnExit = false;!
newTextTrack.addCue(newCue);!
• Cues can also be removed with removeCue(cue)!
HTML5 Interactive Video • November 20, 2013
36
42
37. EXAMPLE: BOOKMARKS
Create cues dynamically and list out the cue list. Navigate
to bookmarks created by user.
HTML5 Interactive Video • November 20, 2013
37
42
38. COMPLEX INTERACTIONS
SHOWING VIDEO ON CANVAS ELEMENTS
• Take frame images from video and place on canvas.
• Video element is hidden while canvas is shown.
• Leverages
– canvas getContext(“2d”)
– drawImage, getImageData, and putImageData
Dynamic Content
Injection example
Image Copied
<video>
HTML5 Interactive Video • November 20, 2013
<canvas>
38
42
39. COMPLEX OVERLAYING
ADDING SPECIAL EFFECTS
• Timing challenge with direct processing.
• Frame buffer needed for holding frames from timer.
• http://www.craftymind.com/factory/html5video/CanvasVideo.html
• http://www.kaizou.org/2012/09/frame-by-frame-video-effects-using-html5and/
Copy taken
On timer
<video>
Hidden
HTML5 Interactive Video • November 20, 2013
Effect Added
Buffer
<canvas>
<canvas>
Shown
39
42
40. RESOURCES
VARIOUS HTML5 VIDEO RESOURCES
• Documentation
– Whatwg.org video element http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html
• 3rd Party Libraries to aid development (not used here)
– cuepoint.js
cuepoint.org
Jquery plugin for subtitles and creating cue points.
– popcorn.js
popcornjs.org
JS Media framework for easier time-based interaction.
– video.js
videojs.com
Open source html5 video player and library.
HTML5 Interactive Video • November 20, 2013
40
42
42. VIDEO CREDITS
• Thanks to the video providers
– Blender Foundation Open Source Projects http://www.blender.org/features/projects/
HTML5 Interactive Video • November 20, 2013
42
42