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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.
[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.
[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 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.
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Ido Green
In this talk from DevCon TLV I've covered the two sides of the coin:
1. Client side: what are the main steps when you are building your Web Applications:
○ Design
○ Code
○ Debug
○ Demo
2. On the server side, you wish to have a great API that you (and others) could use from any platform out there (Mobile, web). The answer on Google Cloud platform is Google Cloud Endpoints.
Sascha Corti
With Internet Explorer 9, Microsoft has entered the league of HTML 5 browsers and with its active participation in the W3C working groups, the company proves its engagements towards the new and emerging standards. Developers however are often left wondering where the boundaries are drawn between HTML5 web site, plug-in based rich internet application and smart client or “app”.
This session intends to answer this question and uses many examples to show you some of the most important enhancements introduced by HTML5, CSS3, SVG, DOM, WOFF and ECMA script. You will learn now the standards are still evolving and how Microsoft is contributing.
http://soft-shake.ch/2011/conference/sessions/microsoft/2011/09/06/introduction-to-html5.html
The Rich Standard: Getting Familiar with HTML5Todd Anglin
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.
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.
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.
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).
As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.
[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.
[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 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.
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Ido Green
In this talk from DevCon TLV I've covered the two sides of the coin:
1. Client side: what are the main steps when you are building your Web Applications:
○ Design
○ Code
○ Debug
○ Demo
2. On the server side, you wish to have a great API that you (and others) could use from any platform out there (Mobile, web). The answer on Google Cloud platform is Google Cloud Endpoints.
Sascha Corti
With Internet Explorer 9, Microsoft has entered the league of HTML 5 browsers and with its active participation in the W3C working groups, the company proves its engagements towards the new and emerging standards. Developers however are often left wondering where the boundaries are drawn between HTML5 web site, plug-in based rich internet application and smart client or “app”.
This session intends to answer this question and uses many examples to show you some of the most important enhancements introduced by HTML5, CSS3, SVG, DOM, WOFF and ECMA script. You will learn now the standards are still evolving and how Microsoft is contributing.
http://soft-shake.ch/2011/conference/sessions/microsoft/2011/09/06/introduction-to-html5.html
The Rich Standard: Getting Familiar with HTML5Todd Anglin
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.
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.
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.
A little presentation about HTML5 video capabilities. SzegedTech Meetup 2013.
A video from the presentation available here in Hungarian: https://www.youtube.com/watch?v=1D6QHpEcPzA
IBC Content Everywhere Hub Presentation: HTML5 And Fastest EncodingBitmovin Inc
Fastest cloud-encoding and adaptive streaming with HTML5 including DRM by Gerald Zankl, IBC 2015
The bitcodin encoding and streaming platform is designed and built from the ground up to scale massively on standard public and private cloud infrastructure, while enabling orders of magnitudes faster transcoding than real time (e.g., a 2-hour HD video in minutes). The fast transcoding enables even the largest on-demand video providers to distribute uploaded media virtually instantly during the upload and transcoding process with no delay. Leveraging the flexibility of the new MPEG-DASH standard – which is fully integrated into bitcodin – content providers can use cutting-edge technologies such as the native DASH adaptive streaming support in HTML5, as well as the native DRM support using MPEG-CENC based upon that. This enables distribution and playback across web and mobile platforms, while being more light-weight and battery efficient than heavy plugins like Silverlight or Flash. bitcodin.com furthermore encourages separation of video, audio and subtitle streams, which helps bitcodin customers to save up to 75 % on their storage costs while increasing distribution efficiency and reducing CDN costs.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
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.
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.
"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.
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.
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
15. Why Flash?
Features missing in HTML5
● Content protection
○ RTMPE protocol / Flash Access
● Camera & Microphone Access
16. Why Flash?
Features missing in HTML5
● Content protection
○ RTMPE protocol / Flash Access
● Camera & Microphone Access
● Adaptive & Live Streaming
17. Why Flash?
Features missing in HTML5
● Content protection
○ RTMPE protocol / Flash Access
● Camera & Microphone Access
● Adaptive & Live Streaming
● Fullscreen video
18. Why Flash?
Features missing in HTML5
● Content protection
○ RTMPE protocol / Flash Access
● Camera & Microphone Access
● Adaptive & Live Streaming
● Fullscreen video
○ Hardware accelerated HD cat videos!
○ **API available in webkit and gecko
19. Why Flash?
Webkit Fullscreen API
var elem = document.getElementById("my-element");
document.onwebkitfullscreenchange = function() {
// The fullscreen element:
// document.webkitFullScreenElement;
console.log ("We went fullscreen!");
};
elem.webkitRequestFullScreen();
20. Why Flash?
Features missing in HTML5
● Content protection
○ RTMPE protocol / Flash Access
● Camera & Microphone Access
● Adaptive & Live Streaming
● Fullscreen video
○ HD, hardware accelerated cat videos!
○ **API available in webkit and gecko
21. Why Flash?
Features missing in HTML5
● Content protection
○ RTMPE protocol / Flash Access
● Camera & Microphone Access
● Adaptive & Live Streaming
● Fullscreen video
○ HD, hardware accelerated cat videos!
○ **API available in webkit and gecko
● Consistent format support
22. Why Flash?
Features missing in HTML5
● Content protection
○ RTMPE protocol / Flash Access
● Camera & Microphone Access
● Adaptive & Live Streaming
● Fullscreen video
○ HD, hardware accelerated cat videos!
○ **API available in webkit and gecko
● Consistent format support
○ HTML5 needs to support both H.264 and WebM
23. Why Flash?
Features missing in HTML5
● Content protection
○ RTMPE protocol / Flash Access
● Camera & Microphone Access
● Adaptive & Live Streaming
● Fullscreen video
○ HD, hardware accelerated cat videos!
○ **API available in webkit and gecko
● Consistent format support
○ HTML5 needs to support both H.264 and WebM
● Cross platform consistency****
30. Why HTML5?
<video> Expectations
● Open source technology
○ Browser / Player / Codec
● Lower latency
○ No plug-in instantiation
● Better performance and fidelity
○ Power Consumption
● Accessibility
○ User agents can have special video handling
33. Why HTML5?
3D
● Flash
○ Build for graphics
○ Tools for easy video manipulation
■ HTML5 would require WebGL or
Canvas
● HTML5
○ Easy integration with browser and
devices
○ Open Standard
○ Allows for innovations by the browser
vendors as well as YouTube
43. When HTML5?
<iframe> Embed
● Give the user HTML5 or Flash based on device and user
preferences.
● Allows for better mobile support.
● Offers an "it just works" experience.
44. Why an iframe?
Other embedding methods
● <script>
○ We need our content to be sandboxed
○ More than just a video tag
● <object>
○ Can load content with the data attribute
○ But no way to interact with it
46. When HTML5?
Detecting HTML5
var videoElement = document.createElement('video');
if (videoElement && videoElement.canPlayType &&
(videoElement.canPlayType('video/mp4; codecs="avc1.42001E, mp4a.40.2"') ||
videoElement.canPlayType('video/webm; codecs="vp8.0, vorbis"'))) {
// Sweet, we can use HTML5!
}
49. Player Start Time
Flash
500ms
HTML5
(Up from 200ms in Jan 2011)
TODO(schechter): Add csi screen captures
50. iframe Embed Time Till Thumbnail Visible
Flash - 5.1s
HTML5 - 1.4s
*Collected data shows faster load times than this control
environment, but the comparison is actuate.
52. Get Video Time
● HTML5:
○ Opera is Awesome
■ 200ms ahead of the pack
● Flash: IE9 and Opera are the leaders
○ 300ms faster
● HTML5 is almost always faster than Flash
○ 300ms - 400ms faster
○ IE9 is an exception
■ IE9 Flash is slightly faster than IE9 HTML5
57. Making Assumptions
● Most users have a recent version of flash
● Thus we can optimistically embed the most
common case and do version checking and
updating after a script loads
● 250ms improvement to flash start time
59. Preload Video Connection
● Resolves DNS while page is rendering
● Maintains an open connection
● 200ms improvement
<head>
<script>
var img = new Image();
img.src = videoConnectionUrl;
</script>
</head>
72. The JavaScript API
Communication
● Poll the URL fragment?
http://youtube.com/embed/video_id#fragment
● Messages are one dimensional.
● Polling eats up CPU and is not instant.
● Both directions of communication use the same
fragment.
73. The JavaScript API
Communication
● Better idea: PostMessage API.
someWindow.postMessage(message, targetOrigin);
74. The JavaScript API
Communication
● Better idea: PostMessage API.
someWindow.postMessage(message, targetOrigin);
● Uses JSON for native encoding and decoding of data.
● No polling.
● Native event listeners.
● Communications are sandboxed per-window.
● Calls are asynchronous.
75. Conclusion
● Flash is still preferred in most places
○ More critical features
○ Deeper reach
● HTML5 is awesome
○ Improves every day
○ Greater mobile reach
○ People want it
76. Questions?
can haz question?
By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/
schechter@google.com
chrisrhodes@google.com