(Responsive) Video
•
0 likes•1,445 views
This document discusses responsive video formats and codecs for HTML5 video, including MP4, WebM, and Ogg Theora. It provides code examples for using media queries to serve different video sources based on screen width. Formats like H.264, VP8 and Vorbis are supported. Tools like FFmpeg can be used to optimize MP4 files and techniques like Apple HLS and MPEG-DASH enable adaptive streaming. Emerging codecs like ORBX.js, HEVC, VP9 and WebRTC are also mentioned.
Report
Share
Report
Share
Download to read offline
Recommended
Vim Plugin Deployment
This document discusses best practices for deploying Vim plugins. It recommends using Git for version control, hosting the repository on GitHub, and structuring the plugin code at the root directory. The document also suggests using vim-makefile to build a Vimball file, then deploying to vim.org and mentioning the GitHub repository to announce and share the new plugin.
Upgrade to HTML5 Video
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.
Headless BDD & Responsive Test Automation
This talk is delivered at CukeUp 2014, London. This include using BDD tools like Behat and Cucumber with headless drivers like PhantomJS and ZombieJS.
Mobile web application
This document discusses challenges in developing mobile web applications. It summarizes issues encountered like lack of repainting, ghost clicks, and HTML5 video bugs across different mobile browsers. It also provides suggestions for debugging mobile browsers like enabling debugging in Safari, using the ADB Chrome extension, and Weinre for the Android Browser. Mobile development requires extra effort to account for variations in browser standards implementation and behavior.
WebCamp HTML5
The document discusses HTML5 and its evolution from working drafts to recommendations. It provides statistics on the number of tests submitted for different HTML5 specifications and how various browsers perform on those tests. It also provides examples of using new HTML5 features like video, canvas, and CSS3 media queries to build responsive designs.
WebCamp HTML5
Introduction à HTML5 : son histoire, son état actuel, les technologies que l'on peut commencer d'envisager à utiliser et l'outillage actuellement disponible. Présentation jouée lors du WebCamp au Centre Pompidou le 15/1
Drupal Performance
A fast website is a good website, but making a website fast takes work. This session of couch coding will discuss the tips & tricks necessary to build the feeds & speeds into your website to make it soar.
DockerCon'15: Shipping Containers to Enterprise Customers
While many businesses adopt Docker for in-house operations, we wrap our apps in containers as a way to deliver them to enterprise customers. In this talk, I'll discuss our experiences with Docker, and the techniques we used to containerize the entire AeroFS virtual appliance. I will also describe an open source tool we developed, that allows application vendors to build and deliver containerized virtual appliances at ease.
Recommended
Vim Plugin Deployment
This document discusses best practices for deploying Vim plugins. It recommends using Git for version control, hosting the repository on GitHub, and structuring the plugin code at the root directory. The document also suggests using vim-makefile to build a Vimball file, then deploying to vim.org and mentioning the GitHub repository to announce and share the new plugin.
Upgrade to HTML5 Video
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.
Headless BDD & Responsive Test Automation
This talk is delivered at CukeUp 2014, London. This include using BDD tools like Behat and Cucumber with headless drivers like PhantomJS and ZombieJS.
Mobile web application
This document discusses challenges in developing mobile web applications. It summarizes issues encountered like lack of repainting, ghost clicks, and HTML5 video bugs across different mobile browsers. It also provides suggestions for debugging mobile browsers like enabling debugging in Safari, using the ADB Chrome extension, and Weinre for the Android Browser. Mobile development requires extra effort to account for variations in browser standards implementation and behavior.
WebCamp HTML5
The document discusses HTML5 and its evolution from working drafts to recommendations. It provides statistics on the number of tests submitted for different HTML5 specifications and how various browsers perform on those tests. It also provides examples of using new HTML5 features like video, canvas, and CSS3 media queries to build responsive designs.
WebCamp HTML5
Introduction à HTML5 : son histoire, son état actuel, les technologies que l'on peut commencer d'envisager à utiliser et l'outillage actuellement disponible. Présentation jouée lors du WebCamp au Centre Pompidou le 15/1
Drupal Performance
A fast website is a good website, but making a website fast takes work. This session of couch coding will discuss the tips & tricks necessary to build the feeds & speeds into your website to make it soar.
DockerCon'15: Shipping Containers to Enterprise Customers
While many businesses adopt Docker for in-house operations, we wrap our apps in containers as a way to deliver them to enterprise customers. In this talk, I'll discuss our experiences with Docker, and the techniques we used to containerize the entire AeroFS virtual appliance. I will also describe an open source tool we developed, that allows application vendors to build and deliver containerized virtual appliances at ease.
Frontend testing with Codeception
Made for T3DD19
Every developer has made the experience that new changes to a project end up breaking existing code. In a worst-case scenario, these new errors sneak into the production system unnoticed.
In order to ensure that your website works, ideally before deploying the code, you should implement automated tests. While most developers are very familiar with functional and unit tests, they often shy away from frontend tests.
I want you show you how easy it can be to set up and run browser-based tests with codeception. This way, you can rest assured that your frontend doesn't break without you noticing.
IE9 the story so far
1. The document discusses the development of Internet Explorer browsers and the goal of delivering the best experience for users.
2. Microsoft released Internet Explorer browsers through different channels, including stable releases, platform previews, and early prototypes on HTML5labs to get feedback on emerging standards.
3. Platform previews were released every 8-12 weeks and included new features like CSS3, HTML5 video/audio, and JavaScript improvements to increase Acid test scores and standards support.
Zalenium - Czyli lepszy Selenium Grid
Zalenium is an open source Selenium Grid extension that allows for video recording of test runs within a Docker container. It provides features like easy scaling of browser instances using Docker, recording videos of test runs for debugging purposes, and accessing browsers via VNC during tests. Some advantages include support from Zalando, faster performance than traditional Selenium Grid, and open source maintenance. The main disadvantage is that it requires Docker which limits its use on Windows systems initially.
Selenoid + Allure - How to use these tools together?
In this presentation I showed how to use Allure with Selenoid together. Presentation was in Warsaw for conference "Automatyzacja testowania - prawdy i mity" (Unfortunately, animations from presentation don't work)
LiveStyle for Vim - Quick start
1. LiveStyle for Vim allows editing CSS in Vim and seeing live updates in Chrome without reloading the page.
2. To use it, install the LiveStyle Vim plugin and Chrome extension, run the livestyled server, and bind CSS files in Chrome to the server to enable live updates.
3. Editing and saving CSS in Vim will then instantly update in the browser without reloading.
Patterns and antipatterns in Docker image lifecycle as was presented at Globa...
While Docker has enabled an unprecedented velocity of software production, it is all too easy to spin out of control. A promotion-based model is required to control and track the flow of Docker images as much as it is required for a traditional software development lifecycle. New tools often introduce new paradigms. We will examine the patterns and the antipatterns for Docker image management, and what impact the new tools have on the battle-proven paradigms of the software development lifecycle.
Testing Automaton - CFSummit 2016
In this advanced session, we will investigate all the ways that you can automate your testing processes with TestBox and many CI and automation tools. From Jenkins integration, Travis CI, Node runners, Grunt watchers and much more. This session will show you the value of continuous integration and how to apply it with modern tools and technologies.
Patterns and antipatterns in Docker image lifecycle as was presented at Devop...
This document contains the slides from a presentation about using JFrog Artifactory and Docker. It discusses how Artifactory can be used to manage Docker images across different environments like development, testing, staging and production. It also talks about building applications in layers using base images and promoting images through a pipeline. Key points are that Artifactory allows hosting multiple Docker repositories per host, using tags to promote images, and building applications in layers on top of base images for improved quality and speed.
Bilder einbinden ist kein Thema, oder?
This document discusses best practices for optimizing images on websites. It covers image formats like JPG, PNG and SVG and techniques such as lazy loading, responsive images using srcset, and optimizing tools. It also discusses alternatives to icon fonts like using SVG sprites. The overall message is on improving page performance by choosing the right image format and implementing optimization strategies.
Sinn und Unsinn von SSL
This document summarizes a presentation on the benefits and proper usage of SSL/TLS. It discusses how SSL/TLS can provide encryption and identity verification for web traffic. It provides examples of how to configure SSL/TLS on web servers and applications to securely transmit sensitive data. It also addresses challenges like supporting older clients and improving performance. Proper SSL/TLS configuration helps secure user privacy and website integrity.
Responsive Design: Mehr als CSS
The document discusses techniques for optimizing responsive web design for mobile devices, including downloading and hiding/resizing unnecessary elements based on screen width, using lightweight JavaScript libraries conditionally, responsive images with srcset, and serving different content for mobile using server-side device detection. It provides examples and links to resources for implementing these techniques.
Web-Performance
This document summarizes techniques for improving web performance, including:
- Using output caching, compression, browser caching and CDNs to reduce page size and load times
- Optimizing images, CSS, JavaScript and databases for faster loading
- Leveraging caching, minification, concatenation and deferred parsing to improve front-end performance
- Implementing techniques like service workers, resource hints and responsive delivery to optimize the user experience
Web Performance Optimierung - DWX13
The document discusses various techniques for optimizing web performance, including:
- Minifying assets like CSS, JavaScript, and images to reduce file sizes
- Leveraging caching, compression, and browser parallelization to speed up page loads
- Implementing responsive design patterns and techniques like image sprites and media queries
- Optimizing assets further with techniques like image optimization, lazy loading, and prefetching
Die .htaccess richtig nutzen
This document provides instructions and examples for properly configuring and using .htaccess files. It discusses Apache and PHP configuration as well as settings for performance, security, redirects, and more. Sections cover topics like error documents, rewriting URLs, compression, caching, and protecting files. The goal is to help optimize a WordPress site using the .htaccess file.
Responsive Videos, mehr oder weniger
1) The document discusses responsive video formats and delivery methods for different devices.
2) It covers video codecs like H.264 and VP8, as well as formats like MP4, WebM and OGG.
3) Adaptive streaming technologies like Apple's HLS and MPEG-DASH are presented as ways to deliver the most appropriate video quality based on a user's bandwidth and device capabilities.
Content Security Policy - PHPUGFFM
The document discusses Content Security Policy (CSP), which helps protect websites from XSS attacks. It provides the syntax for enabling CSP in Apache and PHP applications. It also describes how to configure CSP to report violations via HTTP POST requests to a logging endpoint. Examples are given of CSP violation reports sent by Chrome and Firefox.
HTTPS + Let's Encrypt
The document discusses making websites secure by default through HTTPS. It covers the required technology and best practices for configuring HTTPS, migrating sites to HTTPS to make them more secure and user-friendly, and improving performance. Implementing HTTPS properly can help protect user privacy and data security.
High Performance Images
The document discusses various image formats (GIF, PNG, JPEG), optimization tools, responsive image techniques (srcset, picture), lazy loading, icon fonts versus SVG sprites, and video optimization. It provides information on each topic and examples of how to implement the different techniques for optimizing images and other assets for faster page loads.
Bilder usw...
This document provides information about various image formats (GIF, JPEG, PNG, SVG, WebP), optimizing images, responsive images, icon fonts versus SVG sprites, animations, and outdated techniques no longer needed due to HTTP/2. It includes links to resources for using different image formats, optimizing images, responsive image techniques like srcset and picture, icon fonts versus SVG sprites, video versus animated GIF, and outdated practices with HTTP/2.
More Related Content
What's hot
Frontend testing with Codeception
Made for T3DD19
Every developer has made the experience that new changes to a project end up breaking existing code. In a worst-case scenario, these new errors sneak into the production system unnoticed.
In order to ensure that your website works, ideally before deploying the code, you should implement automated tests. While most developers are very familiar with functional and unit tests, they often shy away from frontend tests.
I want you show you how easy it can be to set up and run browser-based tests with codeception. This way, you can rest assured that your frontend doesn't break without you noticing.
IE9 the story so far
1. The document discusses the development of Internet Explorer browsers and the goal of delivering the best experience for users.
2. Microsoft released Internet Explorer browsers through different channels, including stable releases, platform previews, and early prototypes on HTML5labs to get feedback on emerging standards.
3. Platform previews were released every 8-12 weeks and included new features like CSS3, HTML5 video/audio, and JavaScript improvements to increase Acid test scores and standards support.
Zalenium - Czyli lepszy Selenium Grid
Zalenium is an open source Selenium Grid extension that allows for video recording of test runs within a Docker container. It provides features like easy scaling of browser instances using Docker, recording videos of test runs for debugging purposes, and accessing browsers via VNC during tests. Some advantages include support from Zalando, faster performance than traditional Selenium Grid, and open source maintenance. The main disadvantage is that it requires Docker which limits its use on Windows systems initially.
Selenoid + Allure - How to use these tools together?
In this presentation I showed how to use Allure with Selenoid together. Presentation was in Warsaw for conference "Automatyzacja testowania - prawdy i mity" (Unfortunately, animations from presentation don't work)
LiveStyle for Vim - Quick start
1. LiveStyle for Vim allows editing CSS in Vim and seeing live updates in Chrome without reloading the page.
2. To use it, install the LiveStyle Vim plugin and Chrome extension, run the livestyled server, and bind CSS files in Chrome to the server to enable live updates.
3. Editing and saving CSS in Vim will then instantly update in the browser without reloading.
Patterns and antipatterns in Docker image lifecycle as was presented at Globa...
While Docker has enabled an unprecedented velocity of software production, it is all too easy to spin out of control. A promotion-based model is required to control and track the flow of Docker images as much as it is required for a traditional software development lifecycle. New tools often introduce new paradigms. We will examine the patterns and the antipatterns for Docker image management, and what impact the new tools have on the battle-proven paradigms of the software development lifecycle.
Testing Automaton - CFSummit 2016
In this advanced session, we will investigate all the ways that you can automate your testing processes with TestBox and many CI and automation tools. From Jenkins integration, Travis CI, Node runners, Grunt watchers and much more. This session will show you the value of continuous integration and how to apply it with modern tools and technologies.
Patterns and antipatterns in Docker image lifecycle as was presented at Devop...
This document contains the slides from a presentation about using JFrog Artifactory and Docker. It discusses how Artifactory can be used to manage Docker images across different environments like development, testing, staging and production. It also talks about building applications in layers using base images and promoting images through a pipeline. Key points are that Artifactory allows hosting multiple Docker repositories per host, using tags to promote images, and building applications in layers on top of base images for improved quality and speed.
What's hot (8)
Selenoid + Allure - How to use these tools together?
Selenoid + Allure - How to use these tools together?
Patterns and antipatterns in Docker image lifecycle as was presented at Globa...
Patterns and antipatterns in Docker image lifecycle as was presented at Globa...
Patterns and antipatterns in Docker image lifecycle as was presented at Devop...
Patterns and antipatterns in Docker image lifecycle as was presented at Devop...
Viewers also liked
Bilder einbinden ist kein Thema, oder?
This document discusses best practices for optimizing images on websites. It covers image formats like JPG, PNG and SVG and techniques such as lazy loading, responsive images using srcset, and optimizing tools. It also discusses alternatives to icon fonts like using SVG sprites. The overall message is on improving page performance by choosing the right image format and implementing optimization strategies.
Sinn und Unsinn von SSL
This document summarizes a presentation on the benefits and proper usage of SSL/TLS. It discusses how SSL/TLS can provide encryption and identity verification for web traffic. It provides examples of how to configure SSL/TLS on web servers and applications to securely transmit sensitive data. It also addresses challenges like supporting older clients and improving performance. Proper SSL/TLS configuration helps secure user privacy and website integrity.
Responsive Design: Mehr als CSS
The document discusses techniques for optimizing responsive web design for mobile devices, including downloading and hiding/resizing unnecessary elements based on screen width, using lightweight JavaScript libraries conditionally, responsive images with srcset, and serving different content for mobile using server-side device detection. It provides examples and links to resources for implementing these techniques.
Web-Performance
This document summarizes techniques for improving web performance, including:
- Using output caching, compression, browser caching and CDNs to reduce page size and load times
- Optimizing images, CSS, JavaScript and databases for faster loading
- Leveraging caching, minification, concatenation and deferred parsing to improve front-end performance
- Implementing techniques like service workers, resource hints and responsive delivery to optimize the user experience
Web Performance Optimierung - DWX13
The document discusses various techniques for optimizing web performance, including:
- Minifying assets like CSS, JavaScript, and images to reduce file sizes
- Leveraging caching, compression, and browser parallelization to speed up page loads
- Implementing responsive design patterns and techniques like image sprites and media queries
- Optimizing assets further with techniques like image optimization, lazy loading, and prefetching
Die .htaccess richtig nutzen
This document provides instructions and examples for properly configuring and using .htaccess files. It discusses Apache and PHP configuration as well as settings for performance, security, redirects, and more. Sections cover topics like error documents, rewriting URLs, compression, caching, and protecting files. The goal is to help optimize a WordPress site using the .htaccess file.
Responsive Videos, mehr oder weniger
1) The document discusses responsive video formats and delivery methods for different devices.
2) It covers video codecs like H.264 and VP8, as well as formats like MP4, WebM and OGG.
3) Adaptive streaming technologies like Apple's HLS and MPEG-DASH are presented as ways to deliver the most appropriate video quality based on a user's bandwidth and device capabilities.
Content Security Policy - PHPUGFFM
The document discusses Content Security Policy (CSP), which helps protect websites from XSS attacks. It provides the syntax for enabling CSP in Apache and PHP applications. It also describes how to configure CSP to report violations via HTTP POST requests to a logging endpoint. Examples are given of CSP violation reports sent by Chrome and Firefox.
HTTPS + Let's Encrypt
The document discusses making websites secure by default through HTTPS. It covers the required technology and best practices for configuring HTTPS, migrating sites to HTTPS to make them more secure and user-friendly, and improving performance. Implementing HTTPS properly can help protect user privacy and data security.
High Performance Images
The document discusses various image formats (GIF, PNG, JPEG), optimization tools, responsive image techniques (srcset, picture), lazy loading, icon fonts versus SVG sprites, and video optimization. It provides information on each topic and examples of how to implement the different techniques for optimizing images and other assets for faster page loads.
Bilder usw...
This document provides information about various image formats (GIF, JPEG, PNG, SVG, WebP), optimizing images, responsive images, icon fonts versus SVG sprites, animations, and outdated techniques no longer needed due to HTTP/2. It includes links to resources for using different image formats, optimizing images, responsive image techniques like srcset and picture, icon fonts versus SVG sprites, video versus animated GIF, and outdated practices with HTTP/2.
Mehr Performance für WordPress - WordCamp Köln
The document discusses ways to improve WordPress performance, including optimizing images, minifying and combining CSS and JavaScript files, conditionally loading scripts, caching content, optimizing databases, and prioritizing above-the-fold content. It also provides examples of using .htaccess files, child themes, and hooks to optimize site performance.
Mehr Performance für WordPress - WPFra
Vortrag zum WP Meetup Frankfurt am 14.04.2105 http://wpmeetup-frankfurt.de/2015/wordpress-performance/
WordPress-Templates mit Twig erstellen - PHPUGFFM
This document provides information about using Twig as a templating language for WordPress projects. It discusses advantages of Twig like separation of HTML and PHP. It also covers how to install and configure Twig, use Twig syntax in templates, integrate Twig with plugins like Timber, extend Twig functionality, and lists some WordPress projects that use Twig. Finally, it provides some resources for getting started with WordPress development using Composer and Twig.
WordPress mit Composer und Git verwalten
This document provides instructions and examples for installing, configuring, and using Composer to manage WordPress and other PHP projects. It covers downloading and installing Composer, installing packages and dependencies, updating packages, using Composer scripts, setting up a WordPress project structure with Composer, and additional tips and strategies for version control and deployment.
Weniger aus Bilder holen
This document discusses various techniques for optimizing images and other media on websites. It covers file formats like JPEG, PNG and SVG as well as tools for optimizing images. It also discusses responsive images, video optimization, icon fonts and animated GIF alternatives. HTTP/2 optimizations are mentioned at the end.
Viewers also liked (19)
Similar to (Responsive) Video
HTML5 Video for WordPress
A background on HTML5 video and how it can be used in WordPress today. Talk given in April 2011 at WordCamp Developers, Vancouver, BC.
HTML5 Multimedia Support
The World Wide Web Consortium (W3C) introduced the video element for the purpose of playing videos and movies. The intent was to offer a standard way to play video on the web without requiring plug-ins.
HTML5 Video Player - HTML5 Dev Conf 2012
Slides from my presentation on building your own HTML5 video player at the HTML5 Developer Conference 2012.
Using browser settings for performance
The document discusses various browser settings and APIs that can be used for performance optimizations on websites. It covers techniques like using JavaScript to load different video files for mobile vs desktop, detecting mobile browsers, respecting the prefers-reduced-motion media feature, and proposed new media features in CSS5. It also discusses the DonotTrack header, high contrast mode, dark mode, JavaScript modules, the Network Information API, and Client Hints HTTP headers.
Webvideo, FFmpeg und Drupal
This document discusses using FFmpeg and Drupal for web video. It provides an overview of FFmpeg, including supported formats, codecs, commands for encoding to different formats like MP4, WebM and Ogg Theora. It also covers extracting images from video, setting video quality, 2-pass encoding, presets and moving atom for MP4. Finally it mentions video players and projects for Drupal like Video, JW Player, Flowplayer and Popcorn.js.
HTML5 Video Presentation
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 and audio - DevUp HTML5 / Barcelona /...
The document discusses HTML5 multimedia capabilities for playing audio and video natively in browsers without plugins like Flash. It covers the <video> and <audio> tags, supported formats like MP4, WebM, Ogg Theora, and browser support. It also discusses the media playback API and features like controls, sources for different formats, and responsive design.
HTML5 multimedia - where we are, where we're going
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 Video Right Now
The document discusses adding video to web content using HTML5. It covers new HTML5 tags for audio and video, how to use them by encoding video into different formats, advantages of HTML5 over Flash such as not requiring plugins and working across browsers, and considerations for choosing between HTML5 and Flash depending on audience and browser support needs. It concludes with a question and answer section.
HTML5 Multimedia Streaming
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.
HTML5 Multimedia: where we are, where we're going
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 - audio and video tags
The document discusses using HTML5 audio and video elements to embed multimedia instead of proprietary plugins. It notes browser support is inconsistent but the HTML5 approach reduces dependencies and code weight. Examples are provided showing how to embed audio and video using HTML5 tags like <audio> and <video> along with supported file formats for different browsers. The document recommends making HTML5 the default approach while also implementing device- and browser-specific solutions due to inconsistent support.
Html5 intro
The document provides an introduction and overview of HTML5. It discusses the structure of an HTML5 page, including updates to the doctype, removal of xmlns, and addition of the meta charset tag. New HTML5 elements like article, aside, audio, canvas, and video are presented. Updates to HTML5 forms, including new input types and attributes, are covered. The use of video and audio elements is explained. Finally, the canvas element is introduced and basic drawing using the canvas context is demonstrated.
Hero Video Performance - DrupalCamp Ruhr
The document provides tips and techniques for optimizing video performance on websites, including:
1. Using autoplay, loop, and muted attributes to autoplay videos silently by default.
2. Removing audio tracks from videos to reduce file sizes using FFmpeg or Handbrake.
3. Adding the faststart flag when encoding videos with FFmpeg to optimize buffering and playback.
4. Checking features like connection type, reduced motion preferences, and do not track settings to determine when autoplay is appropriate.
Looking into HTML5 + CSS3
The document discusses HTML5 and CSS3. It begins by looking at Flash and XHTML. It then covers new HTML5 elements like article, aside, audio and video. It discusses HTML5 audio and video formats and browser support. It provides examples of using Canvas, geolocation, offline applications and local databases in HTML5. It also discusses using CSS3 properties like fonts, shadows, gradients and rounded corners. Finally, it notes some criticisms of HTML5 and looks at the future of CSS3.
Mobile Web Video
The document discusses the evolution of web video and its increasing impact on mobile from 2010 to 2012. Key developments include the rise of smartphones, video formats supported in different browsers, tools for format conversion, and libraries like Video.js that provide consistent video playback across devices. WebRTC was also introduced, allowing real-time video chat in browsers. Overall mobile traffic and use of mobile video grew dramatically in this period.
Html 5
The document provides an overview of HTML5 including why to use HTML5, basic HTML5 tags and their descriptions, HTML5 block level elements like header, footer, nav, main tags and their usage, HTML5 multimedia elements like audio and video tags, HTML5 advance tags like progress, meter tags, and HTML5 graphics elements like canvas and SVG tags to draw shapes. It also discusses the differences between HTML and HTML5 and provides examples of usage of various HTML5 elements.
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
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.
HTML5 video & Amazon elastic transcoder - FCIP August 2014
An intro to implementing HTML5 video in HTML files, as well as using the WordPress short code to embed HTML5 video. A brief description of the Flash approach that still works better for transparent video, and how to embed that Flash content with SWFObject 2 and include fallback content using the HTML5 video techniques covered. This allows use of Flash for video with a transparent background for all users & browsers that have Flash installed, and uses an HTML5 fallback for devices and users that don't have an appropriate version of the Flash Player installed.
A few key items are also listed with regard to using Amazon's Elastic Transcoder to convert videos into the needed formats for HTML5 video.
Similar to (Responsive) Video (20)
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
More from Walter Ebert
FrOSCon 2023: WordPress als ActivityPub-Instanz
Talk at the Free and Open Source Software Conference in Sankt Augustin, Germany on 5 August 2023
Hero Video Performance
This document discusses various techniques for optimizing video playback on websites. It covers topics like removing audio, improving loading speeds, detecting device/connection properties, and fallback options when autoplay is disabled. Code snippets demonstrate how to conditionally autoplay video based on factors like screen width, connection type, and browser capabilities. The goal is to provide the best video experience across different environments while being mindful of data usage and user preferences.
Making WordPress fast(er)
This document discusses the importance of website speed and provides tips to optimize performance. It notes that 53% of mobile site visits are abandoned after 3 seconds and shares examples of sites that saw major increases in conversions from reducing load times. To improve speed, it recommends strategies like caching, image optimization, lazy loading images, concatenating and minifying CSS and JS, output compression, browser caching, and using a content delivery network. The document aims to explain why performance matters and provide specific techniques to make sites faster.
Testumgebungen für WordPress
This document discusses options for local and virtual machine-based web development environments, including local development tools like XAMPP, MAMP, and Laravel Valet. It also covers using virtual machines with tools like VirtualBox, Vagrant, Docker, and virtual machine images for WordPress development. Finally, it discusses deployment options like FTP, rsync, and Git as well as continuous integration/delivery services like Jenkins, Travis CI, and GitLab CI.
Modernism in Web Design
The document discusses modernism in web design and its key principles. It references influential modernist architects and designers like Ludwig Mies van der Rohe and Dieter Rams. Some principles of modernist web design mentioned are form follows function, less is more, and good design is as little design as possible. The document also provides examples of early modernist web designs from the 1990s and references the focus on simplicity and minimalism in more recent sites like Google and Facebook.
More from Walter Ebert (12)
Recently uploaded
Main news related to the CCS TSI 2023 (2023/1695)
An English 🇬🇧 translation of a presentation to the speech I gave about the main changes brought by CCS TSI 2023 at the biggest Czech conference on Communications and signalling systems on Railways, which was held in Clarion Hotel Olomouc from 7th to 9th November 2023 (konferenceszt.cz). Attended by around 500 participants and 200 on-line followers.
The original Czech 🇨🇿 version of the presentation can be found here: https://www.slideshare.net/slideshow/hlavni-novinky-souvisejici-s-ccs-tsi-2023-2023-1695/269688092 .
The videorecording (in Czech) from the presentation is available here: https://youtu.be/WzjJWm4IyPk?si=SImb06tuXGb30BEH .
Generating privacy-protected synthetic data using Secludy and Milvus
During this demo, the founders of Secludy will demonstrate how their system utilizes Milvus to store and manipulate embeddings for generating privacy-protected synthetic data. Their approach not only maintains the confidentiality of the original data but also enhances the utility and scalability of LLMs under privacy constraints. Attendees, including machine learning engineers, data scientists, and data managers, will witness first-hand how Secludy's integration with Milvus empowers organizations to harness the power of LLMs securely and efficiently.
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
A Mix Chart displays historical data of numbers in a graphical or tabular form. The Kalyan Rajdhani Mix Chart specifically shows the results of a sequence of numbers over different periods.
20240609 QFM020 Irresponsible AI Reading List May 2024
Everything I found interesting about the irresponsible use of machine intelligence in May 2024
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
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
みなさんこんにちはこれ何文字まで入るの？40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの？えこ...
ここ3000字までしか入らないけどタイトルの方がたくさん文字入ると思います。
HCL Notes and Domino License Cost Reduction in the World of DLAU
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-and-domino-license-cost-reduction-in-the-world-of-dlau/
The introduction of DLAU and the CCB & CCX licensing model caused quite a stir in the HCL community. As a Notes and Domino customer, you may have faced challenges with unexpected user counts and license costs. You probably have questions on how this new licensing approach works and how to benefit from it. Most importantly, you likely have budget constraints and want to save money where possible. Don’t worry, we can help with all of this!
We’ll show you how to fix common misconfigurations that cause higher-than-expected user counts, and how to identify accounts which you can deactivate to save money. There are also frequent patterns that can cause unnecessary cost, like using a person document instead of a mail-in for shared mailboxes. We’ll provide examples and solutions for those as well. And naturally we’ll explain the new licensing model.
Join HCL Ambassador Marc Thomas in this webinar with a special guest appearance from Franz Walder. It will give you the tools and know-how to stay on top of what is going on with Domino licensing. You will be able lower your cost through an optimized configuration and keep it low going forward.
These topics will be covered
- Reducing license cost by finding and fixing misconfigurations and superfluous accounts
- How do CCB and CCX licenses really work?
- Understanding the DLAU tool and how to best utilize it
- Tips for common problem areas, like team mailboxes, functional/test users, etc
- Practical examples and best practices to implement right away
Fueling AI with Great Data with Airbyte Webinar
This talk will focus on how to collect data from a variety of sources, leveraging this data for RAG and other GenAI use cases, and finally charting your course to productionalization.
Programming Foundation Models with DSPy - Meetup Slides
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.
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift
Overview
Dive into the world of anomaly detection on edge devices with our comprehensive hands-on tutorial. This SlideShare presentation will guide you through the entire process, from data collection and model training to edge deployment and real-time monitoring. Perfect for those looking to implement robust anomaly detection systems on resource-constrained IoT/edge devices.
Key Topics Covered
1. Introduction to Anomaly Detection
- Understand the fundamentals of anomaly detection and its importance in identifying unusual behavior or failures in systems.
2. Understanding Edge (IoT)
- Learn about edge computing and IoT, and how they enable real-time data processing and decision-making at the source.
3. What is ArgoCD?
- Discover ArgoCD, a declarative, GitOps continuous delivery tool for Kubernetes, and its role in deploying applications on edge devices.
4. Deployment Using ArgoCD for Edge Devices
- Step-by-step guide on deploying anomaly detection models on edge devices using ArgoCD.
5. Introduction to Apache Kafka and S3
- Explore Apache Kafka for real-time data streaming and Amazon S3 for scalable storage solutions.
6. Viewing Kafka Messages in the Data Lake
- Learn how to view and analyze Kafka messages stored in a data lake for better insights.
7. What is Prometheus?
- Get to know Prometheus, an open-source monitoring and alerting toolkit, and its application in monitoring edge devices.
8. Monitoring Application Metrics with Prometheus
- Detailed instructions on setting up Prometheus to monitor the performance and health of your anomaly detection system.
9. What is Camel K?
- Introduction to Camel K, a lightweight integration framework built on Apache Camel, designed for Kubernetes.
10. Configuring Camel K Integrations for Data Pipelines
- Learn how to configure Camel K for seamless data pipeline integrations in your anomaly detection workflow.
11. What is a Jupyter Notebook?
- Overview of Jupyter Notebooks, an open-source web application for creating and sharing documents with live code, equations, visualizations, and narrative text.
12. Jupyter Notebooks with Code Examples
- Hands-on examples and code snippets in Jupyter Notebooks to help you implement and test anomaly detection models.
Best 20 SEO Techniques To Improve Website Visibility In SERP
Boost your website's visibility with proven SEO techniques! Our latest blog dives into essential strategies to enhance your online presence, increase traffic, and rank higher on search engines. From keyword optimization to quality content creation, learn how to make your site stand out in the crowded digital landscape. Discover actionable tips and expert insights to elevate your SEO game.
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on integration of Salesforce with Bonterra Impact Management.
Interested in deploying an integration with Salesforce for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Project Management Semester Long Project - Acuity
Acuity is an innovative learning app designed to transform the way you engage with knowledge. Powered by AI technology, Acuity takes complex topics and distills them into concise, interactive summaries that are easy to read & understand. Whether you're exploring the depths of quantum mechanics or seeking insight into historical events, Acuity provides the key information you need without the burden of lengthy texts.
Artificial Intelligence for XMLDevelopment
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for life science domain, where you retriever information from biomedical knowledge graphs using LLMs to increase the accuracy and performance of generated answers
Recently uploaded (20)
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
みなさんこんにちはこれ何文字まで入るの？40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの？えこ...
みなさんこんにちはこれ何文字まで入るの？40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの？えこ...
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
(Responsive) Video
- 3. Walter Ebert independent web developer @walterebert walterebert.com slideshare.net/walterebert
- 6. Codecs H.264 / AAC VP8 / Ogg Vorbis
- 7. Media queries <video controls> <source src="small.mp4" type="video/mp4" media="all and (max-width:480px)"> <source src="small.webm" type="video/webm" media="all and (max-width:480px)"> <source src="big.mp4" type="video/mp4"> <source src="big.webm" type="video/webm"> </video> Candidate for removal from the HTML5 specification
- 8. function supports_mp4() { return !!document.createElement('video').canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,''); } function supports_flash() { var hasFlash = false; try { var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); if(fo) hasFlash = true; }catch(e){ var fm = navigator.mimeTypes["application/x-shockwave-flash"]; if( fm && fm.enabledPlugin ) hasFlash = true; } return hasFlash; }
- 9. MP4 moov atom ffmpeg -i input.mp4 -c:v copy -c:a copy -movflags faststart output.mp4 http://ffmpeg.org/ http://www.adobe.com/devnet/video/articles/mp4_movie_atom.html
- 10. Apple HTTP Live Streaming (HLS) https://developer.apple.com/streaming/
- 13. ORBX.js • downloadable HD codec written in JS and WebGL • 25% better compression than H.264 • adaptive bit-rate while streaming http://brendaneich.com/2013/05/today-i-saw-the-future/
- 15. High Efficiency Video Coding (HEVC) a.k.a. H.265 http://hevc.hhi.fraunhofer.de/