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.
This is the story of the glory and struggle of bringing a high quality YouTube experience to the mobile web. Once upon a time there was a web developer who wanted to play videos on the web. So he filmed a cat and wrote a Flash and a HTML5 player. He spent many hours making it work on his favorite desktop browsers and even the one his grandfather still used. People could watch his cat video, he smiled, and the world was good. Then one day someone put a browser in a phone and soon there were many phones with many different browsers. This new set of environments were even harder to develop for and had a slew of new terrifying bugs. The web developer was miserable knowing people couldn’t watch his cat video. With much time and effort he figured out many of the secrets needed to combat the evils of the different mobile platforms. Once again people could watch his cat video, he smiled, and the world was good. The end.
This is 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.
JS Days HTML5 Flash and the Battle for Faster Cat VideosGreg Schechter
HTML5; it’s new, it’s awesome, and it’s powerful, but can it take down the champ of video distribution, Flash? Which technology’s got the ability to bring cat video to the next level. This talk will cover the many challenges of both HTML5 and YouTube adapting to change video distribution on the web.
This document discusses how to export movies created in iMovie to a custom website. It provides instructions on uploading QuickTime movies to a website and playing them with options to have the movie open in its own window or embedded directly into the webpage. It also covers creating different formats for Mac and Windows users and includes sample HTML code for embedding the movie in a webpage.
The document discusses new features in Flash Player 10.2 beta, including Stage Video hardware acceleration for video playback, IE9 hardware accelerated rendering support, and Molehill low-level 3D GPU-accelerated APIs. Stage Video reduces processor usage for video by up to 85% through hardware acceleration. Molehill exposes low-level 3D APIs in ActionScript 3 for Flash Player and AIR and provides programmable shaders and pipelines for 3D graphics. Links to documentation and video tutorials about these new features are also provided.
The document provides an agenda and overview for a meeting about 23 Video. The agenda includes an introduction to 23 Video and demonstrations of the product, customizing video sites, using and customizing video players, integrating with APIs, and getting community information. It also discusses powering over 200 customers through 100+ partners and examples of how people use 23 Video. The roadmap sections discuss future plans for sections & subtitles, global delivery platforms, open uploads, and analytics.
StoryCode Immersion #5 - Popcorn.JS Deep Divestorycode
Popcorn.js is a JavaScript framework that allows for synchronizing HTML5 media like video and audio with interactive elements on a webpage, making media the "conductor" of an experience. It provides a plugin system and normalizes media properties and events to provide an easy API for building interactive narratives. The document outlines how Popcorn.js works, provides examples of plugins and sample code, and gives resources for learning more about developing with the framework.
This is the story of the glory and struggle of bringing a high quality YouTube experience to the mobile web. Once upon a time there was a web developer who wanted to play videos on the web. So he filmed a cat and wrote a Flash and a HTML5 player. He spent many hours making it work on his favorite desktop browsers and even the one his grandfather still used. People could watch his cat video, he smiled, and the world was good. Then one day someone put a browser in a phone and soon there were many phones with many different browsers. This new set of environments were even harder to develop for and had a slew of new terrifying bugs. The web developer was miserable knowing people couldn’t watch his cat video. With much time and effort he figured out many of the secrets needed to combat the evils of the different mobile platforms. Once again people could watch his cat video, he smiled, and the world was good. The end.
This is 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.
JS Days HTML5 Flash and the Battle for Faster Cat VideosGreg Schechter
HTML5; it’s new, it’s awesome, and it’s powerful, but can it take down the champ of video distribution, Flash? Which technology’s got the ability to bring cat video to the next level. This talk will cover the many challenges of both HTML5 and YouTube adapting to change video distribution on the web.
This document discusses how to export movies created in iMovie to a custom website. It provides instructions on uploading QuickTime movies to a website and playing them with options to have the movie open in its own window or embedded directly into the webpage. It also covers creating different formats for Mac and Windows users and includes sample HTML code for embedding the movie in a webpage.
The document discusses new features in Flash Player 10.2 beta, including Stage Video hardware acceleration for video playback, IE9 hardware accelerated rendering support, and Molehill low-level 3D GPU-accelerated APIs. Stage Video reduces processor usage for video by up to 85% through hardware acceleration. Molehill exposes low-level 3D APIs in ActionScript 3 for Flash Player and AIR and provides programmable shaders and pipelines for 3D graphics. Links to documentation and video tutorials about these new features are also provided.
The document provides an agenda and overview for a meeting about 23 Video. The agenda includes an introduction to 23 Video and demonstrations of the product, customizing video sites, using and customizing video players, integrating with APIs, and getting community information. It also discusses powering over 200 customers through 100+ partners and examples of how people use 23 Video. The roadmap sections discuss future plans for sections & subtitles, global delivery platforms, open uploads, and analytics.
StoryCode Immersion #5 - Popcorn.JS Deep Divestorycode
Popcorn.js is a JavaScript framework that allows for synchronizing HTML5 media like video and audio with interactive elements on a webpage, making media the "conductor" of an experience. It provides a plugin system and normalizes media properties and events to provide an easy API for building interactive narratives. The document outlines how Popcorn.js works, provides examples of plugins and sample code, and gives resources for learning more about developing with the framework.
This document provides recommendations and resources for using video, fonts, and other elements in web design. It advises against using Adobe Flash for video on the web, and instead recommends using HTML5 video with supported file formats. It also discusses "web-safe" font options like Arial, Times New Roman and font resources from Google Fonts. The document emphasizes building your own collection of design resources.
The document provides ideas for creating multimedia presentations using various tools, including iPhoto for slideshows, Podcasts, Animoto, Keynote for animated text, iMovie for videos, VoiceThread for audio commentary, Xtranormal for animated videos, StopMotion for frame-by-frame animation, Glogster for online posters, Prezi for zooming presentations, iPad apps like StoryKit and Animoto, GarageBand for music and songs, Comic Life for comic strips, GreenScreen movies, websites using iWeb or Google Sites, interactive quizzes, Screencasts using SMART Recorder or QuickTime, videochats on iChat or Skype, wikis, blogs, and animation software like Animation
Condensed version of my dynamic three hour class on choosing a camera, getting great audio and lighting, shooting, editing, hosting, and will include WordPress specific examples for embedding video.
http://stevegarfield.com
Presentation about YouTube and its accompanying APIs at the National Association of Government Webmasters conference in Cincinnati, OH on September 15, 2011.
YouTube today is much more than a site. Using Google Data APIs and YouTube Player APIs, developers can harness the power of world’s most popular video destination to build new and innovative applications.
YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autón...Jarek Wilkiewicz
The document provides an overview of building video apps using YouTube APIs. It discusses the life cycle of a video on YouTube including uploading, sharing, searching and playback. It then covers the Google Data APIs and Player APIs that apps can use to access YouTube video data and control video playback. The document provides code examples for common tasks like uploading, searching and playing videos. It also showcases several existing apps that integrate YouTube videos and discusses important considerations like terms of service compliance.
This document provides an agenda and summary of an Adobe Flash on Mobile & Devices event held on October 10, 2009. The agenda includes introductions, a discussion of the Adobe Flash Platform for mobiles and devices, a presentation on Flashlite design and development, hands-on activities to create a first Flashlite application, and tips and tricks for Flashlite development. It also covers extending applications with Flashlite mashups, general mobile design guidelines, and demos. The document aims to educate attendees on mobile development with Flash and Flashlite through presentations and activities.
This document outlines an agenda for a workshop on building video apps with YouTube APIs. It includes exercises on setting up the development environment, using the Player and Google Data YouTube APIs, and integrating the YouTube API with an AppEngine application. The exercises guide attendees through running API code samples, modifying examples, incorporating API calls into an AppEngine app, and deploying the app to AppEngine.
Cinemacraft is a video technology company established in 2010 with offices in Tokyo and LA. Their flagship product is Videogram, which allows users to browse and interact with videos in a similar way as photos. It uses algorithms to break videos down into frames that can be commented on individually. They chose to develop Videogram and their other products using Sencha Touch for its cross-platform capabilities. Their development process involves initial testing in the browser followed by testing on actual devices using PhoneGap.
The document summarizes research on conventions used on horror and sci-fi movie websites to help design a website for the film "Shiftmovie". Key elements that will be incorporated include a glowing door background from The Fourth Kind, a navigational menu from Paranormal Activity, and an automatically playing trailer with placeholder from Pandorum. The website will be designed in Adobe Dreamweaver following conventions from researched sites.
Jetpack is one of the most used WordPress plugins. It offers many features to enhance sites for users, readers, and developers. These features include social sharing, security monitoring, backups, galleries, shortcodes, and more. Jetpack integrates with WordPress.com and is easy to install by downloading from the plugin repository and connecting to a WordPress.com account. The presentation provided an overview of many Jetpack features and their benefits.
Zachary used various media technologies throughout the construction of his project. A Nikon DSLR camera was used primarily for filming and capturing footage. Adobe software like Premiere Pro, After Effects, and Photoshop were used extensively for video editing, effects, and image editing. YouTube, Google Drive, and Gmail helped with research, file sharing, and communication. An iPhone was also utilized for photography, audio recording, research, and communication with cast and crew. These technologies were instrumental in all stages of the project from planning to production to evaluation.
1) The document provides instructions on installing Photoshop CS4, checking the system requirements, and running the installer.
2) Key steps include entering your serial number, selecting which components to install, and clicking Install to begin the installation process.
3) Additional tips include using the uninstaller to remove Photoshop, checking your version number in case of support needs, and checking for updates automatically or manually.
Jing and SnagIt are screen capture tools that allow users to take screenshots and screencasts. Jing is free while SnagIt costs $50. Both allow screenshots and screencasts but SnagIt has more advanced editing tools and export options while Jing is simpler to use. For most basic needs, Jing would suffice as a free option that is easy to use and provides screenshots and screencasts, though SnagIt has more power for those willing to pay.
GDD HTML5, Flash, and the Battle for Faster Cat VideosGreg Schechter
This document discusses the ongoing battle between HTML5 and Flash for online video playback. It outlines features still missing from HTML5 like content protection, camera/mic access, and consistent format support. It also analyzes performance data showing HTML5 starting videos faster but Flash still leading on some browsers. Optimization techniques for Flash like preloading connections and lazy loading are discussed. The future of HTML5 video is promising but Flash still has advantages for critical features and reach that many sites prefer for now.
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.
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 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: 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.
The document discusses best practices for optimizing video delivery and performance on websites. It notes that video files are large and growing, and that many sites download full-quality video files even when they will not be displayed due to screen size. The summary recommends resizing videos appropriately for different screens to save bandwidth, avoiding downloading video that will not be displayed, using streaming formats over file downloads when possible, and starting streaming video at lower bitrates for faster startup times. The document stresses the importance of respecting mobile users' data plans in video delivery optimization.
This document provides recommendations and resources for using video, fonts, and other elements in web design. It advises against using Adobe Flash for video on the web, and instead recommends using HTML5 video with supported file formats. It also discusses "web-safe" font options like Arial, Times New Roman and font resources from Google Fonts. The document emphasizes building your own collection of design resources.
The document provides ideas for creating multimedia presentations using various tools, including iPhoto for slideshows, Podcasts, Animoto, Keynote for animated text, iMovie for videos, VoiceThread for audio commentary, Xtranormal for animated videos, StopMotion for frame-by-frame animation, Glogster for online posters, Prezi for zooming presentations, iPad apps like StoryKit and Animoto, GarageBand for music and songs, Comic Life for comic strips, GreenScreen movies, websites using iWeb or Google Sites, interactive quizzes, Screencasts using SMART Recorder or QuickTime, videochats on iChat or Skype, wikis, blogs, and animation software like Animation
Condensed version of my dynamic three hour class on choosing a camera, getting great audio and lighting, shooting, editing, hosting, and will include WordPress specific examples for embedding video.
http://stevegarfield.com
Presentation about YouTube and its accompanying APIs at the National Association of Government Webmasters conference in Cincinnati, OH on September 15, 2011.
YouTube today is much more than a site. Using Google Data APIs and YouTube Player APIs, developers can harness the power of world’s most popular video destination to build new and innovative applications.
YouTube APIs presentation at Facultad de Ciencias, Universidad Nacional Autón...Jarek Wilkiewicz
The document provides an overview of building video apps using YouTube APIs. It discusses the life cycle of a video on YouTube including uploading, sharing, searching and playback. It then covers the Google Data APIs and Player APIs that apps can use to access YouTube video data and control video playback. The document provides code examples for common tasks like uploading, searching and playing videos. It also showcases several existing apps that integrate YouTube videos and discusses important considerations like terms of service compliance.
This document provides an agenda and summary of an Adobe Flash on Mobile & Devices event held on October 10, 2009. The agenda includes introductions, a discussion of the Adobe Flash Platform for mobiles and devices, a presentation on Flashlite design and development, hands-on activities to create a first Flashlite application, and tips and tricks for Flashlite development. It also covers extending applications with Flashlite mashups, general mobile design guidelines, and demos. The document aims to educate attendees on mobile development with Flash and Flashlite through presentations and activities.
This document outlines an agenda for a workshop on building video apps with YouTube APIs. It includes exercises on setting up the development environment, using the Player and Google Data YouTube APIs, and integrating the YouTube API with an AppEngine application. The exercises guide attendees through running API code samples, modifying examples, incorporating API calls into an AppEngine app, and deploying the app to AppEngine.
Cinemacraft is a video technology company established in 2010 with offices in Tokyo and LA. Their flagship product is Videogram, which allows users to browse and interact with videos in a similar way as photos. It uses algorithms to break videos down into frames that can be commented on individually. They chose to develop Videogram and their other products using Sencha Touch for its cross-platform capabilities. Their development process involves initial testing in the browser followed by testing on actual devices using PhoneGap.
The document summarizes research on conventions used on horror and sci-fi movie websites to help design a website for the film "Shiftmovie". Key elements that will be incorporated include a glowing door background from The Fourth Kind, a navigational menu from Paranormal Activity, and an automatically playing trailer with placeholder from Pandorum. The website will be designed in Adobe Dreamweaver following conventions from researched sites.
Jetpack is one of the most used WordPress plugins. It offers many features to enhance sites for users, readers, and developers. These features include social sharing, security monitoring, backups, galleries, shortcodes, and more. Jetpack integrates with WordPress.com and is easy to install by downloading from the plugin repository and connecting to a WordPress.com account. The presentation provided an overview of many Jetpack features and their benefits.
Zachary used various media technologies throughout the construction of his project. A Nikon DSLR camera was used primarily for filming and capturing footage. Adobe software like Premiere Pro, After Effects, and Photoshop were used extensively for video editing, effects, and image editing. YouTube, Google Drive, and Gmail helped with research, file sharing, and communication. An iPhone was also utilized for photography, audio recording, research, and communication with cast and crew. These technologies were instrumental in all stages of the project from planning to production to evaluation.
1) The document provides instructions on installing Photoshop CS4, checking the system requirements, and running the installer.
2) Key steps include entering your serial number, selecting which components to install, and clicking Install to begin the installation process.
3) Additional tips include using the uninstaller to remove Photoshop, checking your version number in case of support needs, and checking for updates automatically or manually.
Jing and SnagIt are screen capture tools that allow users to take screenshots and screencasts. Jing is free while SnagIt costs $50. Both allow screenshots and screencasts but SnagIt has more advanced editing tools and export options while Jing is simpler to use. For most basic needs, Jing would suffice as a free option that is easy to use and provides screenshots and screencasts, though SnagIt has more power for those willing to pay.
GDD HTML5, Flash, and the Battle for Faster Cat VideosGreg Schechter
This document discusses the ongoing battle between HTML5 and Flash for online video playback. It outlines features still missing from HTML5 like content protection, camera/mic access, and consistent format support. It also analyzes performance data showing HTML5 starting videos faster but Flash still leading on some browsers. Optimization techniques for Flash like preloading connections and lazy loading are discussed. The future of HTML5 video is promising but Flash still has advantages for critical features and reach that many sites prefer for now.
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.
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 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: 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.
The document discusses best practices for optimizing video delivery and performance on websites. It notes that video files are large and growing, and that many sites download full-quality video files even when they will not be displayed due to screen size. The summary recommends resizing videos appropriately for different screens to save bandwidth, avoiding downloading video that will not be displayed, using streaming formats over file downloads when possible, and starting streaming video at lower bitrates for faster startup times. The document stresses the importance of respecting mobile users' data plans in video delivery optimization.
This document provides best practices for optimizing video delivery and streaming on the web. It discusses how video files are large and can negatively impact page load times and user data plans. Some key recommendations include resizing videos appropriately for different screens, avoiding downloading hidden or unnecessary videos, using video streaming with a low starting bitrate for faster startup times, stripping audio from silent videos, and auditing third party video hosts for performance issues. The document emphasizes optimizing video delivery to respect mobile users' limited data plans.
The document discusses best practices for optimizing video delivery and streaming on websites. It notes that video files are large and growing, and can negatively impact page load times and user data plans. Some key recommendations include resizing videos appropriately for different screens to reduce file sizes, avoiding downloading video files that won't be displayed, stripping audio from silent videos, using video streaming with adaptive bitrates to optimize for network conditions, and auditing third party video hosts for performance. The overall message is to respect mobile users' data plans when delivering video on websites.
This document discusses best practices for optimizing video delivery and performance. It notes that video files are large and growing, and can negatively impact bandwidth. Key recommendations include resizing videos appropriately for different screens, only downloading video that will be displayed, using streaming over static downloads, starting streams at lower bitrates for faster startup, and auditing third parties. The overall message is the importance of respecting mobile users' data plans when delivering video.
This document discusses best practices for optimizing video delivery and performance on the web. It notes that video files are large and growing, and that 19% of videos are identical on desktop and mobile despite different screen sizes. The key recommendations are to resize videos appropriately for screens by adjusting quality, bitrate, and dimensions while respecting users' data plans, and to use video streaming with adaptive bitrates to optimize startup time and quality. Additional tips include stripping audio from silent videos, avoiding preloading unnecessary videos, and auditing third party video hosts. The overall message is to thoughtfully optimize video delivery to provide a good experience without wasting users' mobile data.
This document discusses best practices for optimizing video delivery and performance. It notes that video files are large and growing, and can negatively impact mobile data plans. Key recommendations include resizing videos appropriately for different screens, only downloading video that will be displayed, using streaming over file downloads when possible, starting streams at lower bitrates for faster load times, and auditing third party video hosts for performance optimizations. The overall message is the importance of respecting mobile users' limited data plans.
This document discusses best practices for optimizing video delivery and performance. It notes that video files are large and growing, and can negatively impact bandwidth. Key recommendations include resizing videos appropriately for different screens, only downloading video that will be displayed, using streaming over file downloads, starting streams at lower bitrates for faster startup, and auditing third parties. The overall message is to respect mobile users' data plans when delivering video.
This document provides best practices for optimizing video delivery and streaming on the web. It notes that video files are large and growing, and that 19% of videos are identical on desktop and mobile despite different screen sizes. Key recommendations include resizing videos appropriately for devices, stripping audio from silent videos, avoiding preloading videos that won't be visible, and using streaming with adaptive bitrates to optimize for network conditions and faster start times. The document emphasizes respecting mobile users' data plans.
Using the Presentation API and external screens on AndroidXavier Hallade
This document discusses adding multi-screen support to Android applications using the Presentation API. It describes various connection methods like Miracast, HDMI, and Chromecast Mirroring. It provides examples of using the Presentation API to display content on an external screen independently of the phone screen. It also gives ideas for dual-screen applications and discusses related APIs.
1. Video files are large and consuming more mobile data. Streaming video helps reduce this by only downloading segments as needed.
2. Best practices for video include resizing files appropriately for screens, avoiding downloading hidden or duplicate videos, stripping audio from silent videos, and starting streaming at lower bitrates for faster startup.
3. Video players are not responsive by default, so using the correct attributes can optimize streaming and respect users' data plans. Third party video hosts also need performance auditing.
This document provides an overview of HTML5 API support in browsers. It discusses features such as forms, video, audio, drag and drop, canvas, geolocation, web storage, app cache, web workers, and server sent events. For each feature, it provides examples codes and lists browser support. It notes that some features like web workers are not supported in Internet Explorer. The document aims to help understand how HTML5 features are implemented across different browsers and on mobile.
The document provides an outline and overview of HTML5 video including:
1) Basics of setting up HTML5 video including recommended software, codecs supported by browsers, and standards being developed.
2) Details on editing and preparing video for the web including transcoding, publishing video on a webpage, and using JavaScript to control the video player.
3) Expert topics covering cross-platform publishing using fallback options, hosting video online, and considerations for accessibility.
Take a look at several screencasting tools to find out hoe you can easily share with teachers and parents . . . and how teachers can share with their students! Easy and free solutions will be shared as well as practical ideas for using screencasting as an administrator.
Integrating web-based videos in your PDFs (with FrameMaker-to Acrobat TimeSav...Shlomo Perets
This document discusses integrating web-based videos into PDF documents using Adobe Acrobat and FrameMaker. It covers how videos can enrich technical documentation by accommodating different learning styles and making processes easier to understand visually. Web-based videos have the advantage of not increasing PDF file size and allowing updates without redistributing PDFs, though internet access is required for playback. The document provides instructions for adding videos to PDFs in Acrobat and using Multimedia Assistant shortcuts to include videos that play within the PDF reader. It also discusses video hosting, activation methods, and one-time end-user setup to avoid security alerts.
Video files can be large and consume significant bandwidth. It is important to optimize video delivery for different devices and network conditions. Key strategies include resizing videos for appropriate quality and dimensions based on screen size, using adaptive bitrate streaming to select the optimal video quality, and preloading only enough video to start playback smoothly. Careful optimization of video files and delivery is needed to balance video quality and bandwidth usage.
Programming Foundation Models with DSPy - Meetup SlidesZilliz
Prompting language models is hard, while programming language models is easy. In this talk, I will discuss the state-of-the-art framework DSPy for programming foundation models with its powerful optimizers and runtime constraint system.
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfTechgropse Pvt.Ltd.
In this blog post, we'll delve into the intersection of AI and app development in Saudi Arabia, focusing on the food delivery sector. We'll explore how AI is revolutionizing the way Saudi consumers order food, how restaurants manage their operations, and how delivery partners navigate the bustling streets of cities like Riyadh, Jeddah, and Dammam. Through real-world case studies, we'll showcase how leading Saudi food delivery apps are leveraging AI to redefine convenience, personalization, and efficiency.
Full-RAG: A modern architecture for hyper-personalizationZilliz
Mike Del Balso, CEO & Co-Founder at Tecton, presents "Full RAG," a novel approach to AI recommendation systems, aiming to push beyond the limitations of traditional models through a deep integration of contextual insights and real-time data, leveraging the Retrieval-Augmented Generation architecture. This talk will outline Full RAG's potential to significantly enhance personalization, address engineering challenges such as data management and model training, and introduce data enrichment with reranking as a key solution. Attendees will gain crucial insights into the importance of hyperpersonalization in AI, the capabilities of Full RAG for advanced personalization, and strategies for managing complex data integrations for deploying cutting-edge AI solutions.
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
Have you ever been confused by the myriad of choices offered by AWS for hosting a website or an API?
Lambda, Elastic Beanstalk, Lightsail, Amplify, S3 (and more!) can each host websites + APIs. But which one should we choose?
Which one is cheapest? Which one is fastest? Which one will scale to meet our needs?
Join me in this session as we dive into each AWS hosting service to determine which one is best for your scenario and explain why!
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2024/06/building-and-scaling-ai-applications-with-the-nx-ai-manager-a-presentation-from-network-optix/
Robin van Emden, Senior Director of Data Science at Network Optix, presents the “Building and Scaling AI Applications with the Nx AI Manager,” tutorial at the May 2024 Embedded Vision Summit.
In this presentation, van Emden covers the basics of scaling edge AI solutions using the Nx tool kit. He emphasizes the process of developing AI models and deploying them globally. He also showcases the conversion of AI models and the creation of effective edge AI pipelines, with a focus on pre-processing, model conversion, selecting the appropriate inference engine for the target hardware and post-processing.
van Emden shows how Nx can simplify the developer’s life and facilitate a rapid transition from concept to production-ready applications.He provides valuable insights into developing scalable and efficient edge AI solutions, with a strong focus on practical implementation.
Infrastructure Challenges in Scaling RAG with Custom AI modelsZilliz
Building Retrieval-Augmented Generation (RAG) systems with open-source and custom AI models is a complex task. This talk explores the challenges in productionizing RAG systems, including retrieval performance, response synthesis, and evaluation. We’ll discuss how to leverage open-source models like text embeddings, language models, and custom fine-tuned models to enhance RAG performance. Additionally, we’ll cover how BentoML can help orchestrate and scale these AI components efficiently, ensuring seamless deployment and management of RAG systems in the cloud.
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceIndexBug
Imagine a world where machines not only perform tasks but also learn, adapt, and make decisions. This is the promise of Artificial Intelligence (AI), a technology that's not just enhancing our lives but revolutionizing entire industries.
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfMalak Abu Hammad
Discover how MongoDB Atlas and vector search technology can revolutionize your application's search capabilities. This comprehensive presentation covers:
* What is Vector Search?
* Importance and benefits of vector search
* Practical use cases across various industries
* Step-by-step implementation guide
* Live demos with code snippets
* Enhancing LLM capabilities with vector search
* Best practices and optimization strategies
Perfect for developers, AI enthusiasts, and tech leaders. Learn how to leverage MongoDB Atlas to deliver highly relevant, context-aware search results, transforming your data retrieval process. Stay ahead in tech innovation and maximize the potential of your applications.
#MongoDB #VectorSearch #AI #SemanticSearch #TechInnovation #DataScience #LLM #MachineLearning #SearchTechnology
17. Native
○ For fallbacks, use rtsp:// protocol (serving .3pg) if the
device won't support HTML5
○ Use custom protocol / URL scheme to launch your own
Android, iOS native app (no Windows Phone yet)
■ youtube://video_id
26. Mobile Formats Support
Chrome Safari Firefox Opera IE Android
H.264
WebM Android 4+ Android 4+ Android 4+
HLS Android 3+
Platform Versions and Distribution
27. The Source
<video>
<source src="funny_cat_video.mp4">
<source src="funny_cat_video.webm">
</video>
31. Basic video tag
Safari
○ Renders a thumbnail poster and play button (flaky)
○ Background is set to black and cannot be overwritten
○ If a parent element has display:none set at any point the video fails to
playback properly
Opera
○ Gives video dimentions black background if the information is
available
○ Has issues with stretching WebM
IE and Android
○ Play button/film icon for all video tags regardless if browser can play
the format
○ Background is set to black/grey and cannot be overwritten
33. Poster Attribute
Use the poster attribute to get a thumbnail
Safari, Chrome, Android, and Opera
○ Preserve aspect ratio of poster image
IE and Firefox
○ Stretch image to size of video tag
IE
○ Keeps poster as paused state
All Others
○ Replace video with the paused frame
34. Basic video tag
Chrome
○ Default click to toggle play/pause
○ Remove with an empty onclick handler
Safari
○ Will launch any supported video with or without an onclick handler
Android and IE
○ Shows click interactions but does not play with empty onclick
35. Basic video tag
Pro tips:
○ Create your own cued state to convey you can play the video
○ Set the background color to black for continuity across platforms
37. Controls
Chrome Safari Firefox Opera IE Android
Play/pause
Button
Volume Only in Mute toggle Don't work in
Controls Fullscreen only Android 4
Seek bar
Fullscreen Button Gesture Button
button
Playback Both Fullscreen Inline only Determined Fullscreen Both
Type only by hardware only
40. Custom Controls
● Allows us to expand the set of controls and add our own
○ annotations
○ playlist
○ captions
○ more
41. Custom Controls Pro Tips
● User expect to be able to drag the progress
bar
○ Need to remender to prevent scroll on touchstart
● Volume can't be set everywhere and users
are accustomed to using device controls
○ So don't build controls for it
42. Custom Controls Pro Tips
● Fingers are fat
○ Average finger is 11mm so make targets at least
40px with 10px padding
○ Use SVG's so icons can be scaled and shared with
desktop application
○ Do what you can in css
43. Custom Controls Pro Tips
● Don't trigger content with hover
● Fullscreen
○ The browsing context is always fullscreen so fake it
50. Mobile Fullscreen
● Open New Tab
● webkitEnterFullscreen
■ Webkit only
■ Video element only
■ metadata must be loaded
51. Mobile Fullscreen
● Open New Tab
● webkitEnterFullscreen
■ Webkit only
■ Video element only
■ metadata must be loaded
● Pro Tip: Remember size context
changes so use viewport to scale
icons and controls
55. autoplay
In Safari on iOS (for all devices, including iPad),
where the user may be on a cellular network and
be charged per data unit, preload and autoplay are
disabled. No data is loaded until the user initiates it.
62. autoplay
function someClickEvent(evt) {
// In a user initiated thread.
myVideoElement.load();
getVideoData(); // Triggers an ajax call.
}
function onGetVideoDataReturned(data) {
// Not in a user initiated thread.
setVideoElementSrc(data);
myVideoElement.load();
myVideoElement.play();
}
63. autoplay
function someClickEvent(evt) {
// In a user initiated thread.
myVideoElement.load();
getVideoData(); // Triggers an ajax call.
}
function onGetVideoDataReturned(data) {
// Not in a user initiated thread.
setVideoElementSrc(data);
myVideoElement.load();
// For Android
window.setTimeout(function() {
myVideoElement.play();
}, 0);
}
66. Embeds
<script>
○ We need our content to be sandboxed
○ More than just a video tag
67. Embeds
<script>
○ We need our content to be sandboxed
○ More than just a video tag
<object>
68. Embeds
<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 via
JavaScript
72. Embeds
Pro tip: Plan for the future (if you can)
<iframe type="text/html"
width="640"
height="385"
frameborder="0"
src="http://www.youtube.com/embed/VIDEO_ID"
allowfullscreen>
</iframe>
76. Testing: The Old Fashioned Way
● Device lab
○ accurate
○ costly
○ space inefficient
○ boring
77. Testing: With Software
● Hardware Emulators / Simulators
○ available for major systems
○ approximation varies
○ still boring
● Android Emulator
○ bulky, slow, no video codecs
● iOs Simulator
○ both tablet and phone
78. Testing: With Software
● Browser Simulators
○ Poorer approximation
● Opera Mobile Simulator
○ missing video tag support
● Fennec (FF) Simulator
○ poor touch control mapping
○ sends desktop user agent
80. Testing: Automation
● Android Webdriver
○ Still no video support
● iOS Webdriver
○ Need to register as ios dev
○ Intermittent issues with playback
● IE
○ No webdriver APIs for mobile
81. Testing: Automation
● Chrome, Opera
○ Driver APIs built-in
○ Remote debugging
● FFMobile
○ No webdriver APIs
82. Testing: Automation Strategy
● Test API methods in mobile context first
○ cheap
○ can approximate video playback by video.
currentTime
83. Testing: Automation Strategy
● More sophisticated tests to follow
○ screenreader
● Screen cap processing
○ check for distortion
○ playback accuracy