HTML5 Video Player - HTML5 Dev Conf 2012

Oct 15, 2012Download as key, pdf

2 likes1,426 views

steveheffernan

Slides from my presentation on building your own HTML5 video player at the HTML5 Developer Conference 2012.

• History
• User Support
• Formats
• Code
• Bugs
• Resources

HTML5 Video Player - HTML5 Dev Conf 2012

Reasons to use HTML5 Video

• It’s the future!
• Runs natively in the browser
• Cleaner code

<video src="video.mp4" controls></video>

<video controls>

<source src="video.mp4" type="video/mp4">

<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">

<object type="application/x-shockwave-ﬂash" data="ﬂash.swf">

<param name="movie" value="ﬂash.swf" />

<param name="ﬂashvars" value="ﬁle=video.mp4" />

</object>
</video>

http://blog.mefeedia.com/html5-dec-2011

CONTAINER FORMAT

VIDEO CODEC

AUDIO CODEC

Three Formats

9+ 3+ 3+ 9+

4+ 6+ 10.6+

3.5+ 3+ 10.5+

Content Protection

• RTMP Streaming • Source Obscurity • Native App
Obscurity
• DRM (Flash • Time/GEO/IP
Access/Smooth limited URLs • HTTP Streaming
Streaming)
• AES Encryption

<video controls>

<source src="video.mp4" type="video/mp4">

<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>

•Controls •Autoplay •Tracks
•Poster •Loop
•Preload •Width/Height

<video controls autoplay loop width="480" height="270"
poster="poster.png"
preload="auto" >

<source src="video.mp4" type="video/mp4">

<track kind="captions" src="captions.vtt" srclang="en">
</video>

Tag Builder
http://videojs.com/tag-builder/

JavaScript API

• Attributes
• Functions
• Events

Browser/General Issues

•Autobuffer => Preload
•Cross-browser Load Progress Tracking
•Missing Poster in Some Safari Versions
•HTML5 Browsers Do Not Fallback on
Incompatible Sources

Determine Video Support

<script>

var vidTag = document.createElement("video"),
ﬂashVersion = swfobject.getFlashPlayerVersion();

if (vidTag.canPlayType && vidTag.canPlayType("video/mp4")) {
// Video Tag
} else if (ﬂashVersion.major > 9) {
// Flash Object
} else {
// No Video Support
}

</script>

SWF Object: http://code.google.com/p/swfobject/

Device Quirks: iOS 3

• Needs MP4 as ﬁrst source.
• iPad Poster Attribute Bug
• iPad JS in Head / iPhone JS not in Head

Device Quirks: Android 2.1 / 2.2

• Can’t touch to start
• Type attribute breaks video
• canPlayType function broken

~25% of Android Users

Android Touch Start Fix

<script>

if (navigator.userAgent.match(/Android/i) !== null) {
$("video").click(function(){
this.play();
});
}

</script>

Android Type Attribute Fix Options

• Don’t include type attribute
• Don’t use source tags

<video src="video.mp4" controls></video>

• Set source through JS API
video.src("video.mp4")

Android canPlayType Fix
<script>
var androidMatch = navigator.userAgent.match(/Android (d+)./i);

if (androidMatch && androidMatch[1] < 3) {

// Overwrite canPlayType
document.createElement("video")
.constructor.prototype.canPlayType = function(type){
if (type && type.toLowerCase().indexOf("video/mp4") !== -1) {
return "maybe";
} else {
return "";
}
};

}
</script>

HTML5 Video and Audio in Depth

http://videojs.com/lynda

HTML 5 may take some time to find full support in all major browsers, but you may be surprised to discover how many of HTML 5’s features are available today! HTML 5 is the next generation standard for web applications, and it promises to give plug-in based RIAs a serious challenge. In this demo heavy session, you’ll see HTML 5 in action and learn what you can do with today’s browser support for the new standard. If you’re building rich web applications and you’ve never touched HTML 5, this session is a must see.

Edge of the WebTodd Anglin

[Slides from my 'Edge of the Web' workshop] The web platform has evolved significantly over the last several years, giving developers more power than ever to create rich, interactive applications delivered via browsers. New capabilities in HTML, CSS and JavaScript paired with constantly updating browsers make it possible to do things on the web that used to be the exclusive domain of plugins and native apps. In this workshop, you’ll be introduced to some of the most powerful and useful techniques available to the modern web developer that will change the way you think about web app development. The future of web app development is exciting, and these are the technologies that will underpin and drive that change. Don’t get left behind with IE8-era knowledge. Get ahead of the curve and master the edge of the web.

HTML5 JS APIsRemy Sharp

HTML5: An OverviewNagendra Um

Building an HTML5 Video PlayerJim Jeffers

Taiwan Web Standards Talk 2011Zi Bin Cheah

Getting Started with HTML5 in Tech Com (STC 2012)Peter Lubbers

Multimedia on the web - HTML5 video and audioChristian Heilmann

HTML5 and the web of tomorrow!Christian Heilmann

Keypoints html5dynamis

Using HTML5 sensiblyChristian Heilmann

Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter

Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas

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!

[In Control 2010] HTML5Christopher Schmitt

This document discusses HTML5 and provides examples of new HTML5 elements and features such as audio, video, and the canvas element. It demonstrates how to add audio and video to a basic HTML5 page structure and provides code samples using the canvas element to draw shapes. It also discusses HTML5 support in different browsers and techniques for improving compatibility, such as using JavaScript to add support for new elements in older browsers.

Browser Wars Episode 1: The Phantom MenaceNicholas Zakas

This document summarizes the history and evolution of web browsers and internet technologies from the early 1990s to the late 1990s. It traces the development of key browsers like Netscape Navigator and Internet Explorer. It also outlines the introduction of important web standards like HTML, CSS, JavaScript and XML. Major events included the commercialization of the web in the mid-1990s, the browser wars between Netscape and Microsoft in the late 90s, and the consolidation of online services providers toward the end of the decade.

HTML5 Mullet: Forms & Input ValidationTodd Anglin

Todd Anglin gave a presentation on HTML5 forms and input types. He discussed the new input types available like email, url, number and date/time. He demonstrated how to use these new input types and attributes like placeholder, required and pattern. Anglin also covered customizing the browser rendered inputs using shadow DOM and styling validation states with CSS. For older browsers without native support, he recommended polyfilling the new functionality with JavaScript.

Html5 OverviewOwen Williams

HTML5 Overviewreybango

Introduction to HTML5 & CSS3Pradeep Varadaraja Banavara

This document discusses new features in HTML5 and CSS3. It provides examples of new HTML5 elements like <header>, <nav>, <article>, and new forms elements. It also covers new CSS3 features like gradients, rounded corners, shadows. Additionally, it mentions new JavaScript APIs in HTML5 for things like geolocation, drag and drop, offline web apps, storage and more. Finally, it encourages developers to use new web standards and provides resources for learning HTML5.

What is HTML 5?Susan Winters

Web Developers are excited to use HTML 5 features but sometimes they need to explain to their non-technical boss what it is and how it can benefit the company. This presentation provides just enough information to share the capabilities of this new technologies without overwhelming the audience with the technical details. "What is HTML5?" covers things you might have seen on other websites and wanted to add on your own website but you didn't know it was a feature of HTML 5. After viewing this slideshow you will probably give your web developer the "go ahead" to upgrade your current HTML 4 website to HTML 5. You will also understand why web developers don't like IE (Internet Explorer) and why they always want you to keep your browser updated to latest version. "I have seen the future. It's in my browser" is the slogan used by many who have joined the HTML 5 revolution.

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas

Prebrowsing - Velocity NY 2013Steve Souders

The document discusses techniques for prebrowsing or prefetching resources to improve page load performance. It describes how developers can use <link> tags with rel="dns-prefetch", rel="prefetch", and rel="prerender" to hint to browsers on resources that could be pre-resolved, pre-downloaded or pre-rendered before they are needed. It also explains how browsers perform internal prefetching optimizations like DNS pre-resolution, TCP pre-connection and prefetching of likely-needed resources during page transitions using predictors. The goal is to get resources the browser will need before it needs them to reduce load times.

Doing More with LESS for CSSTodd Anglin

As CSS3 adds support for rich styling in standards-based web applications, style sheet markup can quickly get out of control! Many CSS effects today require repetitive rules to cover the proprietary browser CSS prefixes. LESS for CSS is an open source framework that makes modern CSS more manageable. With support for variables, mix-ins, nested CSS rules, and operations, LESS finally makes complex CSS easy to maintain. In this session, you will discover how LESS can be easily adopted in any ASP.NET project and learn about tools that make it easy to work with LESS in Visual Studio 2010.

Intro to html 5Ian Jasper Mangampo

Real World Web Standardsgleddy

HTML5 Introductiondynamis

This document provides an overview and introduction to HTML5. It begins with a discussion of browser market share statistics and the birth of HTML5 by the WHATWG organization. It then outlines the wide range of new HTML5 markup, elements, events, APIs and technologies including forms, canvas, web sockets, and more. The remainder of the document discusses the status and implementation of these HTML5 features across modern browsers like Firefox, and provides references to HTML5 test suites, specifications, implementations and demos.

Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Patrick Lauke

The document discusses the new features of HTML5 including improved semantics, forms, and multimedia capabilities. Some key points: 1. HTML5 adds new semantic elements like <header>, <footer>, <nav> that more accurately describe content. It also simplifies the doctype to <!DOCTYPE html>. 2. HTML5 introduces richer built-in form controls without JavaScript like date/time pickers, number sliders, and improved validation. 3. Multimedia is enhanced with <video>, <audio>, and <canvas> elements, allowing native playback of audio/video without plugins and scriptable drawing on <canvas>.

HTML5: features with examplesAlfredo Torre

Html5 tutorial for beginnersSingsys Pte Ltd

More Related Content

What's hot (20)

Multimedia on the web - HTML5 video and audioChristian Heilmann

HTML5 and the web of tomorrow!Christian Heilmann

Keypoints html5dynamis

Using HTML5 sensiblyChristian Heilmann

Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter

Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas

[In Control 2010] HTML5Christopher Schmitt

Browser Wars Episode 1: The Phantom MenaceNicholas Zakas

HTML5 Mullet: Forms & Input ValidationTodd Anglin

Html5 OverviewOwen Williams

HTML5 Overviewreybango

Introduction to HTML5 & CSS3Pradeep Varadaraja Banavara

What is HTML 5?Susan Winters

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas

Prebrowsing - Velocity NY 2013Steve Souders

Doing More with LESS for CSSTodd Anglin

Intro to html 5Ian Jasper Mangampo

Real World Web Standardsgleddy

HTML5 Introductiondynamis

Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Patrick Lauke

Multimedia on the web - HTML5 video and audioChristian Heilmann

HTML5 and the web of tomorrow!Christian Heilmann

Keypoints html5dynamis

Using HTML5 sensiblyChristian Heilmann

Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter

Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas

[In Control 2010] HTML5Christopher Schmitt

Browser Wars Episode 1: The Phantom MenaceNicholas Zakas

HTML5 Mullet: Forms & Input ValidationTodd Anglin

Html5 OverviewOwen Williams

HTML5 Overviewreybango

Introduction to HTML5 & CSS3Pradeep Varadaraja Banavara

What is HTML 5?Susan Winters

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas

Prebrowsing - Velocity NY 2013Steve Souders

Doing More with LESS for CSSTodd Anglin

Intro to html 5Ian Jasper Mangampo

Real World Web Standardsgleddy

HTML5 Introductiondynamis

Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Patrick Lauke

Viewers also liked (9)

HTML5: features with examplesAlfredo Torre

Html5 tutorial for beginnersSingsys Pte Ltd

Making the HTML5 Video element interactiveCharles Hudson

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

Use case document for boot fitting formKalai Vani

This document outlines requirements for a boot fitting form module. It describes fields to capture patient details, measurements, medical conditions, and generated reports. It also specifies navigation between pages for treatment recommendations, customer declaration, and order/return history. Alignment, sizing, and interactive elements like dropdowns and images are defined. The goal is to design an intuitive, responsive form to document boot fittings and generate customized patient reports and treatment plans.

Building an HTML5 Video PlayerBrightcove

html5.pptNiharika Gupta

This document compares HTML4 and HTML5, discussing their versions over time. It notes that HTML5 introduced new structures like drag and drop, can embed video/audio without Flash, and handles inaccurate syntax, while HTML4 used older structures and required Flash for media. HTML5 also introduced new APIs, tags, and features like local storage that enhanced flexibility, while HTML4 had more limited traditional APIs and no local storage capability.

How to Embed a PowerPoint Presentation Using SlideShareJoie Ocon

reveal.js 3.0.0Hakim El Hattab

Reveal.js is an HTML presentation framework that allows users to create beautiful presentations using HTML. It has features like vertical slides, nested slides, Markdown support, different transition styles, themes, slide backgrounds, images, video, tables, quotes, and linking between slides. Presentations can be exported to PDF and custom states and events can be triggered on each slide. The framework is touch optimized and works on devices like mobile phones and tablets.

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 [email protected] 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

HTML5: features with examplesAlfredo Torre

Html5 tutorial for beginnersSingsys Pte Ltd

Making the HTML5 Video element interactiveCharles Hudson

Use case document for boot fitting formKalai Vani

Building an HTML5 Video PlayerBrightcove

html5.pptNiharika Gupta

How to Embed a PowerPoint Presentation Using SlideShareJoie Ocon

reveal.js 3.0.0Hakim El Hattab

What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...Edureka!

Similar to HTML5 Video Player - HTML5 Dev Conf 2012 (20)

Html5videobenwilkins

HTML5 video allows videos to be directly embedded and played in browsers without plugins using the <video> tag. It supports multiple codecs like H.264, Theora, and VP8 to work across browsers, but a fallback is needed for Internet Explorer using Flash. Issues exist across browsers and devices that require using specific codecs and attributes to ensure cross-browser compatibility. With continued advancement, HTML5 video has potential for more interactive and social capabilities.

HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...Patrick Lauke

HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012Patrick Lauke

This document summarizes new multimedia capabilities in HTML5, including native support for video and audio playback without plugins. It describes how the <video> and <audio> tags can be used to embed video and audio into web pages directly in the browser. It also discusses the various video and audio formats that are supported, such as MP4, WebM, and Ogg formats. The document notes that HTML5 does not specify exact formats or controls, but provides JavaScript APIs to control playback programatically.

Upgrade to HTML5 Videosteveheffernan

The document discusses HTML5 video and the VideoJS library. It provides an overview of different video formats (MP4, WebM, Ogg), embedding video with HTML5 using different source elements, and challenges across browsers and devices. It then introduces VideoJS, a JavaScript library that adds custom controls, features and fixes to the native HTML5 video player, including volume control, full-window mode, and subtitles. The library consists of HTML embed code, the JavaScript library, and a CSS skin to style the player controls.

HTML5 Video Presentationsith33

The document discusses the <video> tag in HTML5 for embedding video on web pages. It describes the <video> tag, the supported video formats H.264 and Theora, and compatibility issues around browser support and patent licensing. It recommends using H.264 due to broader support from browsers and devices, and providing fallback options like the <object> tag for browsers that do not support <video>. JavaScript can be used to control video playback and handle events. While <video> is not fully compatible across all platforms yet, its support is growing and it allows for richer web content compared to other options.

HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...Patrick Lauke

This document discusses new multimedia capabilities in HTML5, including browser-native <video>, <audio>, and <canvas> elements. It provides examples of how to use these elements to embed video and audio with controls and different formats, access camera feeds, and manipulate image data in the <canvas>. It also addresses concerns about browser support and recommends feature detection rather than browser sniffing for progressive enhancement.

HTML5 multimedia - where we are, where we're goingbrucelawson

The document discusses the development of HTML5 multimedia capabilities. It describes an experimental <video> element being implemented by Opera that provides a simple JavaScript API for controlling video playback. Issues around choosing a baseline video format that is universally supported are also discussed, along with considerations for audio formats and giving users options to play video across different browsers. The maturity of various HTML5 multimedia features is assessed.

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 for WordPresssteveheffernan

JS Days Mobile MeowGreg Schechter

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.

Web DU Mobile MeowGreg Schechter

Mobile Meow at MobilismGreg Schechter

Greg Schechter & Eugene Goldin — Mobile Meow: Bringing YouTube Videos to a Mobile World 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 vid eo, he smiled, and the world was good. The end. Greg is a fearless web warrior, fighting for browser and website progress. While training at the University of Illinois in Urbana-Champaign, he published articles with the Opera Web Standards Curriculum. Subsequently, he went on to battle alongside many different web companies, including Amazon, Yahoo, and Google. His current alliance is with YouTube, where he spearheads the movement for HTML5 video capabilities. Eugene Goldin is a javascript developer at YouTube. His interests include taking web videos where no video could go before, improving how users interact with web technologies, and long walks on the beach.

HTML5 Multimedia StreamingEDINA, University of Edinburgh

1. The document discusses HTML5 multimedia streaming and provides information on browser support for different video formats like H.264 and WebM as well as examples of encoding video for different formats. 2. It also covers audio formats and tools for encoding media, and provides examples for playing video and audio in HTML5 with formats like MP4, WebM and Ogg. 3. Pseudo-streaming techniques for HTML5 and Flash are also described along with server configurations for Apache and Nginx to support streaming of different media formats.

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.

HTML5 Audio & VideoAaron Gustafson

Beginning html5 media, 2nd editionser

This document provides an overview of encoding video for HTML5 playback. It discusses the importance of understanding containers and codecs. The main containers supported by browsers are MP4, WebM, and Ogg. MP4 typically contains H.264 video and AAC audio, WebM contains VP8 or VP9 video with Vorbis or Opus audio, and Ogg contains Theora video with Vorbis or Opus audio. Codecs like H.264, VP8, and Theora are used to compress the video, while codecs like AAC, Vorbis, and Opus compress the audio. The document also discusses tools that can be used to create video files in these various formats for HTML5 playback.

HTML5 APIs - The New FrontierRobert Nyman

Html5 vs Flash videoFrédéric Caron

The document compares Flash and HTML5 for embedding video on web pages. Prior to HTML5, Flash was commonly used because there was no standard way to embed video in HTML. While HTML5 aims to standardize video playback through the <video> tag, browser support for different video formats is still evolving and no single format works across all browsers. Both Flash and HTML5 have advantages for different use cases, so the best approach is to use the right tool depending on requirements.

HTML Media: Where We Are & Where We Need To GoNigel Parker

Modern browsers both on the desktop and on mobile devices support HTML Media. Chirs Double works for Mozilla and focuses on HTML Media, Nigel Parker works for Microsoft and is experienced in working with broadcast media on the web and more recently HTML Media. Together Chris and Nigel will take you through how you can leverage HTML Media in todays web applications and talk about what is coming next.

Web Directions @media 2010Patrick Lauke

HTML5 is a new version of HTML that provides new semantic elements and APIs for multimedia content like video and canvas scriptable graphics without plugins. It standardizes current browser behaviors and introduces new form and media elements that work across browsers. While support is not perfect yet, progressive enhancement approaches ensure graceful degradation. HTML5 provides alternatives to plugins like Flash, giving developers more choice in how to build rich web applications.

Html5videobenwilkins

HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...Patrick Lauke

HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012Patrick Lauke

Upgrade to HTML5 Videosteveheffernan

HTML5 Video Presentationsith33

HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...Patrick Lauke

HTML5 multimedia - where we are, where we're goingbrucelawson

HTML5 Multimedia: where we are, where we're goingbrucelawson

HTML5 Video for WordPresssteveheffernan

JS Days Mobile MeowGreg Schechter

Web DU Mobile MeowGreg Schechter

Mobile Meow at MobilismGreg Schechter

HTML5 Multimedia StreamingEDINA, University of Edinburgh

Craft 2019 - “The Upside Down” Of The Web - Video technologiesMáté Nádasdi

HTML5 Audio & VideoAaron Gustafson

Beginning html5 media, 2nd editionser

HTML5 APIs - The New FrontierRobert Nyman

Html5 vs Flash videoFrédéric Caron

HTML Media: Where We Are & Where We Need To GoNigel Parker

Web Directions @media 2010Patrick Lauke

Recently uploaded (20)

Cisco ISE Performance, Scalability and Best Practices.pdfsuperdpz

How to Detect Outliers in IBM SPSS Statistics.pptxVersion 1 Analytics

Introduction to Internet of things .ppt.hok12341073

No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureSafe Software

When projects depend on fast, reliable spatial data, every minute counts. AI Clearing needed a faster way to handle complex spatial data from drone surveys, CAD designs and 3D project models across construction sites. With FME Form, they built no-code workflows to clean, convert, integrate, and validate dozens of data formats – cutting analysis time from 5 hours to just 30 minutes. Join us, our partner Globema, and customer AI Clearing to see how they: -Automate processing of 2D, 3D, drone, spatial, and non-spatial data -Analyze construction progress 10x faster and with fewer errors -Handle diverse formats like DWG, KML, SHP, and PDF with ease -Scale their workflows for international projects in solar, roads, and pipelines If you work with complex data, join us to learn how to optimize your own processes and transform your results with FME.

If You Use Databricks, You Definitely Need FMESafe Software

Enabling BIM / GIS integrations with Other Systems with FMESafe Software

Jacobs has successfully utilized FME to tackle the complexities of integrating diverse data sources in a confidential $1 billion campus improvement project. The project aimed to create a comprehensive digital twin by merging Building Information Modeling (BIM) data, Construction Operations Building Information Exchange (COBie) data, and various other data sources into a unified Geographic Information System (GIS) platform. The challenge lay in the disparate nature of these data sources, which were siloed and incompatible with each other, hindering efficient data management and decision-making processes. To address this, Jacobs leveraged FME to automate the extraction, transformation, and loading (ETL) of data between ArcGIS Indoors and IBM Maximo. This process ensured accurate transfer of maintainable asset and work order data, creating a comprehensive 2D and 3D representation of the campus for Facility Management. FME's server capabilities enabled real-time updates and synchronization between ArcGIS Indoors and Maximo, facilitating automatic updates of asset information and work orders. Additionally, Survey123 forms allowed field personnel to capture and submit data directly from their mobile devices, triggering FME workflows via webhooks for real-time data updates. This seamless integration has significantly enhanced data management, improved decision-making processes, and ensured data consistency across the project lifecycle.

“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...Edge AI and Vision Alliance

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/solving-tomorrows-ai-problems-today-with-cadences-newest-processor-a-presentation-from-cadence/ Amol Borkar, Product Marketing Director at Cadence, presents the “Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor” tutorial at the May 2025 Embedded Vision Summit. Artificial Intelligence is rapidly integrating into every aspect of technology. While the neural processing unit (NPU) often receives the majority of the spotlight as the ultimate AI problem solver, it is essential to recognize that not all AI workloads can be efficiently executed on an NPU and that neural network architectures are evolving rapidly. To create efficient chips and systems with market longevity, designers must plan for diverse AI workloads that include networks yet to be invented. In this presentation, Borkar introduces a new processor from Cadence Tensilica. This new solution is designed to complement any NPU, creating the perfect synergy between the two processing engines and establishing a robust AI subsystem able to efficiently support workloads yet to be encountered. This combination allows developers to achieve efficiency and performance on the AI workloads of today and tomorrow, paving the way for future innovations in AI-powered devices.

Providing an OGC API Processes REST Interface for FME FlowSafe Software

This presentation will showcase an adapter for FME Flow that provides REST endpoints for FME Workspaces following the OGC API Processes specification. The implementation delivers robust, user-friendly API endpoints, including standardized methods for parameter provision. Additionally, it enhances security and user management by supporting OAuth2 authentication. Join us to discover how these advancements can elevate your enterprise integration workflows and ensure seamless, secure interactions with FME Flow.

Trends Artificial Intelligence - Mary MeekerClive Dickens

Mary Meeker’s 2024 AI report highlights a seismic shift in productivity, creativity, and business value driven by generative AI. She charts the rapid adoption of tools like ChatGPT and Midjourney, likening today’s moment to the dawn of the internet. The report emphasizes AI’s impact on knowledge work, software development, and personalized services—while also cautioning about data quality, ethical use, and the human-AI partnership. In short, Meeker sees AI as a transformative force accelerating innovation and redefining how we live and work.

“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...Edge AI and Vision Alliance

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/state-space-models-vs-transformers-for-ultra-low-power-edge-ai-a-presentation-from-brainchip/ Tony Lewis, Chief Technology Officer at BrainChip, presents the “State-space Models vs. Transformers for Ultra-low-power Edge AI” tutorial at the May 2025 Embedded Vision Summit. At the embedded edge, choices of language model architectures have profound implications on the ability to meet demanding performance, latency and energy efficiency requirements. In this presentation, Lewis contrasts state-space models (SSMs) with transformers for use in this constrained regime. While transformers rely on a read-write key-value cache, SSMs can be constructed as read-only architectures, enabling the use of novel memory types and reducing power consumption. Furthermore, SSMs require significantly fewer multiply-accumulate units—drastically reducing compute energy and chip area. New techniques enable distillation-based migration from transformer models such as Llama to SSMs without major performance loss. In latency-sensitive applications, techniques such as precomputing input sequences allow SSMs to achieve sub-100 ms time-to-first-token, enabling real-time interactivity. Lewis presents a detailed side-by-side comparison of these architectures, outlining their trade-offs and opportunities at the extreme edge.

Introduction to Typescript - GDG On Campus EUEGoogle Developer Group On Campus European Universities in Egypt

Interested in leveling up your JavaScript skills? Join us for our Introduction to TypeScript workshop. Learn how TypeScript can improve your code with dynamic typing, better tooling, and cleaner architecture. Whether you're a beginner or have some experience with JavaScript, this session will give you a solid foundation in TypeScript and how to integrate it into your projects. Workshop content: - What is TypeScript? - What is the problem with JavaScript? - Why TypeScript is the solution - Coding demo

Down the Rabbit Hole – Solving 5 Training RoadblocksRustici Software

Feeling stuck in the Matrix of your training technologies? You’re not alone. Managing your training catalog, wrangling LMSs and delivering content across different tools and audiences can feel like dodging digital bullets. At some point, you hit a fork in the road: Keep patching things up as issues pop up… or follow the rabbit hole to the root of the problems. Good news, we’ve already been down that rabbit hole. Peter Overton and Cameron Gray of Rustici Software are here to share what we found. In this webinar, we’ll break down 5 training roadblocks in delivery and management and show you how they’re easier to fix than you might think.

Viral>Wondershare Filmora 14.5.18.12900 Crack Free DownloadPuppy jhon

Oracle Cloud Infrastructure Generative AI ProfessionalVICTOR MAESTRE RAMIREZ

Developing Schemas with FME and Excel - Peak of Data & AI 2025Safe Software

When working with other team members who may not know the Esri GIS platform or may not be database professionals; discussing schema development or changes can be difficult. I have been using Excel to help illustrate and discuss schema design/changes during meetings and it has proven a useful tool to help illustrate how a schema will be built. With just a few extra columns, that Excel file can be sent to FME to create new feature classes/tables. This presentation will go thru the steps needed to accomplish this task and provide some lessons learned and tips/tricks that I use to speed the process.

Your startup on AWS - How to architect and maintain a Lean and Mean account J...angelo60207

Prevent infrastructure costs from becoming a significant line item on your startup’s budget! Serial entrepreneur and software architect Angelo Mandato will share his experience with AWS Activate (startup credits from AWS) and knowledge on how to architect a lean and mean AWS account ideal for budget minded and bootstrapped startups. In this session you will learn how to manage a production ready AWS account capable of scaling as your startup grows for less than $100/month before credits. We will discuss AWS Budgets, Cost Explorer, architect priorities, and the importance of having flexible, optimized Infrastructure as Code. We will wrap everything up discussing opportunities where to save with AWS services such as S3, EC2, Load Balancers, Lambda Functions, RDS, and many others.

Ben Blair - Operating Safely in a Vibe Coding WorldAWS Chicago

Bridging the divide: A conversation on tariffs today in the book industry - T...BookNet Canada

A collaboration-focused conversation on the recently imposed US and Canadian tariffs where speakers shared insights into the current legislative landscape, ongoing advocacy efforts, and recommended next steps. This event was presented in partnership with the Book Industry Study Group. Link to accompanying resource: https://bnctechforum.ca/sessions/bridging-the-divide-a-conversation-on-tariffs-today-in-the-book-industry/ Presented by BookNet Canada and the Book Industry Study Group on May 29, 2025 with support from the Department of Canadian Heritage.

Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...Impelsys Inc.

Web accessibility is a fundamental principle that strives to make the internet inclusive for all. According to the World Health Organization, over a billion people worldwide live with some form of disability. These individuals face significant challenges when navigating the digital landscape, making the quest for accessible web content more critical than ever. Enter Artificial Intelligence (AI), a technological marvel with the potential to reshape the way we approach web accessibility. AI offers innovative solutions that can automate processes, enhance user experiences, and ultimately revolutionize web accessibility. In this blog post, we’ll explore how AI is making waves in the world of web accessibility.

Domino IQ – What to Expect, First Steps and Use Casespanagenda

Webinar Recording: https://www.panagenda.com/webinars/domino-iq-what-to-expect-first-steps-and-use-cases/ HCL Domino iQ Server – From Ideas Portal to implemented Feature. Discover what it is, what it isn’t, and explore the opportunities and challenges it presents. Key Takeaways - What are Large Language Models (LLMs) and how do they relate to Domino iQ - Essential prerequisites for deploying Domino iQ Server - Step-by-step instructions on setting up your Domino iQ Server - Share and discuss thoughts and ideas to maximize the potential of Domino iQ