html5 player for safari

Able Player

Fully accessible cross-browser html5 media player..

Able Player is a fully accessible cross-browser HTML5 media player.

To see the player in action check out the Able Player Examples page.

• Supports both audio and video.
• Supports either a single audio track or an entire playlist.
• Includes a full set of player controls that are keyboard-accessible, properly labeled for screen reader users, and controllable by speech recognition users.
• Includes customizable keyboard shortcuts that enable the player to be operated from anywhere on the web page (unless there are multiple instances of the player on a given page; then the player must have focus for keyboard shortcuts to work).
• Features high contrast, scalable controls that remain visible in Windows High Contrast mode, plus an easy-to-see focus indicator so keyboard users can easily tell which control currently has focus.
• Supports closed captions and subtitles in Web Video Timed Text (WebVTT) format, the standard format recommended by the HTML5 specification.
• Supports chapters, also using WebVTT. Chapters are specific landing points in the video, allowing video content to have structure and be more easily navigated.
• Supports text-based audio description, also using WebVTT. At designated times, the description text is read aloud by browsers, or by screen readers for browsers that don’t support the Web Speech API. Users can optionally set their player to pause when audio description starts in order to avoid conflicts between the description and program audio.
• Supports audio description as a separate video. When two videos are available (one with description and one without), both can be delivered together using the same player and users can toggle between the versions.
• Supports adjustable playback rate. Users who need to slow down the video in order to better process and understand its content can do so; and users who need to speed up the video in order to maintain better focus can do so.
• Includes an interactive transcript feature, built from the WebVTT chapter, caption and description files as the page is loaded. Users can click anywhere in the transcript to start playing the video (or audio) at that point. Keyboard users can also choose to keyboard-enable the transcript, so they can tab through its content one caption at a time and press enter to play the media at the desired point.
• Features automatic text highlighting within the transcript as the media plays. This feature is enabled by default but can be turned off if users find it distracting.
• Supports YouTube and Vimeo videos.
• Provides users with the ability to customize the display of captions and subtitles. Users can control the font style, size, and color of caption text; plus background color and transparency; all from the Preferences dialog. They can also choose to position captions below the video instead of the default position (an semi-transparent overlay).
• Supports fallback content if the media cannot be played (see section on Fallback for details).
• Includes extensive customization options. Many of the features described above are controlled by user preferences. This is based on the belief that every user has different needs and there are no one-size-fits-all solutions. This is the heart of universal design.

Supported Languages

Able Player has been translated into the following languages. To add another language, see instructions below under Contributing .

• Chinese, Traditional (Taiwan)

Contributing

There are many ways to contribute to Able Player, and we welcome and appreciate your help! Here are some options:

• If you spot bugs are have feature requests, please submit them to the Issues queue.
• If you have code to contribute, please note that all development occurs on the develop branch . This is often many commits ahead of the master branch, so please do all development from develop , and submit pull requests there. We particularly appreciate help with any issues in the Issues queue that have been flagged with “help wanted”.
• If you are multilingual, please consider translating Able Player into another language! All labels, prompts, messages, and help text for each language are contained within a single file, contained within the /translations directory.

Compatibility

Able Player has been tested with the following browsers and assistive technologies.

• Firefox 3.x and higher
• Internet Explorer 10 and higher
• Microsoft Edge all versions
• Google Chrome 7.0 and higher
• Opera 10.63 and higher
• Safari 5.0 on Mac OS X
• Safari on IOS 3.2.2 and higher
• Chrome on Android 4.2 and higher

Note that mobile browsers have limitations (e.g., volume control and autostart are not supported)

Dependencies

Able Player has the following third party dependencies:

• Able Player uses jQuery . Version 3.2.1 or higher is recommended. The example code below uses Google’s hosted libraries; no download required.
• Able Player uses js-cookie to store and retrieve user preferences in cookies. This script is distributed with Able Player . Prior to version 2.3, Able Player used jquery.cookie for this same purpose.

To install Able Player, copy the following files from the Able Player repo into a folder on your web server:

• button-icons/*
• styles/* (optional, see note below)
• thirdparty/* (includes js-cookie, as mentioned above)
• translations/*

The build folder includes minified production code ( ableplayer.min.js and ableplayer.min.css ). For debugging and/or style customization purposes, human-readable source files are also available:

• build/ableplayer.js
• styles/ableplayer.css

All modern browsers have supported HTML5 media elements for many years. However, there are still older browsers in use that don’t have this support (e.g., Internet Explorer 9 and earlier). For these, you need to provide fallback content.

Prior to version 4.0, Able Player used JW Player as a fallback Flash player for older browsers. However, this solution was built specifically on JW Player 6 which is now many versions old and difficult to find.

Also, prior to version 4.0, Able Player used Modernizr to enable styling of HTML5 elements in Internet Explorer 6 through 8. This too is no longer supported, and Modernizr is no longer needed.

Instead, we recommend providing alternative content as a child of the <video> or <audio> element. For example, this could be a link to the media file so users can download it and play it on their player of choice. Or it could be a link to a transcript.

If the browser is unable to play the media file, Able Player will show this alternative content. If no alternative content is provided, Able Player will display a standard message that lists the minimum versions of common web browsers required for playing HTML5 media.

Setup Step 1: Use HTML5 Doctype

Able Player is built on the HTML5 media elements, so at the top of your web page be sure you have the HTML5 doctype:

Setup Step 2: Add JavaScript and CSS

Copy and paste the following code into your web page. This code applies to all use cases, both audio and video.

Setup Step 3: Add HTML

Add an HTML5 <audio> or <video> element to your web page, as follows.

Copy and paste the following code into your web page, replacing the source files with the path to your own media files. Use both OGG and MP3 to ensure cross-browser compatibility, since some browsers don’t support MP3.

Copy and paste the following code into your web page, replacing the source files with the path to your own media files. Use both WebM and MP4 to ensure cross-browser compatibility, since some browsers don’t support MP4.

Supported Attributes

The following attributes are supported on both the <audio> and <video> elements:

Required Attributes

• id - required; any unique ID
• data-able-player - required

Optional; General-Purpose

• data-debug - optional; if present will write messages to the developer console
• autoplay - optional; play media automatically when page loads. For accessibility reasons, this is not recommended unless user is sure to expect media to automatically start. For example, autoplay could reasonably be used in conjunction with data-start-time in a media search application.
• loop - optional; loops and plays the media file repeatedly. If used in conjunction with a playlist, loops the entire playlist rather than individual tracks.
• playsinline - optional but recommended; instructs supporting browsers to play the video “inline” within the web page. This is especially applicable on iPhones, which by default load the video in their own built-in video player, thereby removing it from its surrounding context, which includes Able Player buttons and controls, an interactive transcript, and any other companion features added via Able Player. If this attribute is present, it works for all supported videos, including YouTube and Vimeo videos.
• preload - optional; tells the browser how much media to download when the page loads. If the media is the central focus of the web page, use preload=”auto” , which instructs the browser to download as much of the media as possible. If the media is not a central focus, downloading the entire media resource can consume valuable bandwidth, so preload=”metadata” would be a better option.
• width - width of the media player in pixels. For video, this value should reflect the target width of the media itself. If not provided the player will be sized to fit its container.
• data-root-path - define path to root directory of Able Player; generally not required but may be needed in rare instances where Able Player is unable to identify its current path on the web server
• data-heading-level - optional; Able Player injects an off-screen HTML heading “Media Player” (or localized equivalent) at the top of the player so screen reader users can easily find the player. It automatically assigns a heading level that is one level deeper than the closest parent heading. This attribute can be used to manually set the heading level, rather than relying on Able Player to assign it automatically. Valid values are 1 through 6. A value of 0 is also supported, and instructs Able Player to not inject a heading at all. The latter should be used only if the web page already includes a heading immediately prior to the media player.
• data-hide-controls - optional; set to “true” to hide controls during playback. Controls are visibly hidden but still accessible to assistive technologies. Controls reappear if user presses any key or moves the mouse over the video player region.
• data-icon-type - optional; “svg”, “font” or “image”; “svg” is the default with automatic fallback to “font” unless either (a) the browser doesn’t support icon fonts or (b) the user has a custom style sheet that may impact the display of icon fonts; in either case falls back to images. Should generally leave as is unless testing the fallback.
• data-skin - optional; “legacy (default) or “2020”. The default skin has two rows of controls, with the seekbar positioned in available space within the top row. The “2020” skin, introduced in version 4.2, has all buttons in one row beneath a full-width seekbar.
• data-speed-icons - optional; “animals” (default) or “arrows”. The default setting uses a turtle icon for slower and a rabbit icon for faster . Setting this to “arrows” uses the original Able Player icons (prior to version 3.5), arrows pointing up for faster and down for slower .
• data-start-time - optional; time at which you want the audio to start playing (in seconds)
• data-steno-mode - optional; “true” to allow keyboard shortcuts for controlling the player remotely within textarea form fields, e.g., for transcribing media content.
• data-volume - optional; set the default volume (0 to 10; default is 7 to avoid overpowering screen reader audio)
• data-seek-interval - optional; interval (in seconds) of forward and rewind buttons. By default, seek interval is intelligently calculated based on duration of the media.
• data-show-now-playing - optional; “true” or “false” to include “Selected track” section within player; only applies when a playlist is present
• data-lang - optional; specify language of the player using 2-character language code (default is “en” for English)
• data-force-lang - optional; include this option to force the player to use the value of data-lang as the player language. Otherwise, the player language will be set as follows, in order of precedence: 1) the language of the web page or user’s web browser if either is known and if there is a matching translation file; 2) the value of data-lang if provided; 3) English.
• data-captions-position - optional; specify default position of captions relative to the video (either “below” or “overlay”; “below” is the default if not specified). Users can override this setting in Captions Preferences.

Able Player can automatically generate an accessible interactive transcript from the chapters, captions, and descriptions tracks. There are three types of interactive transcripts supported:

• “external” - Automatically generated, written to an external div (requires data-transcript-div )
• “popup” - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button on the controller
• “manual” - A manually coded external transcript (requires data-transcript-src )

The following attributes control which of the above types, if any, are generated:

• data-transcript-div - optional; id of an external div in which to display an interactive transcript.
• data-transcript-src - optional; id of an external div that contains a pre-existing manually coded transcript. Able Player will parse this transcript and interact with it during playback.
• data-include-transcript - optional; set to “false” to exclude transcript button from controller.

If none of the above attributes are present, the transcript will be displayed in a draggable, resizable popup that can be toggled on/off using a button on the controller. Note that a toggle button is added to the controller only if the transcript is a “popup” type; there is no toggle button for either the “external” or “manual” transcript types.

Additional transcript-related attributes include:

• data-transcript-title - optional; override default transcript title (default is “Transcript”, or “Lyrics” if the data-lyrics-mode attribute is present)
• data-lyrics-mode - optional; forces a line break between and within captions in the transcript

To manually code the transcript, one simple strategy is to first allow Able Player to automatically generate a transcript. Then copy and paste its content as a starting point. To manually code a transcript from scratch, use the following markup (see Video Demo #7 for an example):

• Wrap the entire transcript in a container with class=”able-transcript”, and wrap that in another container with class=”able-transcript-area”.
• Add an empty <div> just inside the outer container with class=”able-window-toolbar”.
• Wrap all audio description in a <div> element with class=”able-transcript-desc”.
• Add a <span> element to the start of each audio description block, with class=”able-hidden” and text “Description:”. This helps screen reader users to distinguish between caption and description text.
• Wrap each block of caption text in a <div> element with class=”able-transcript-block”.
• Wrap each clickable segment of content in a <span> element, with class=”able-transcript-seekpoint”, plus data-start and data-end attributes. The values of these two data attributes are the video start and end times expressed in seconds (decimals points are allowed).
• If the clickable span is caption text, also add the “able-transcript-caption” class.
• Wrap unspoken content such as names of speakers or descriptions of sound in a <span> element with class=”able-unspoken”.
• Use any other markup desired to add structure and style to your transcript. Able Player will ignore it.
• data-chapters-div - optional; id of an external div in which to display a list of chapters. The list of chapters is generated automatically if a chapters track is available in a WebVTT file. If this attribute is not provided and chapter are available, chapters will be displayed in a popup menu triggered by the Chapters button.
• data-use-chapters-button - optional; set to “false” to exclude chapters button from controller. If using the data-chapters-div attribute to write the chapters to an external container, you might not want users to be able to toggle the chapters off.
• data-chapters-title - optional; override default chapters title (default is “Chapters”). A null value (data-chapters-title=””) eliminates the title altogether.
• data-chapters-default - optional; identify ID of default chapter (must correspond with the text or value immediately above the timestamp in your chapter’s WebVTT file). If this attribute is present, the media will be advanced to this start time. Otherwise it will start at the beginning. (See also data-start-time ).
• data-seekbar-scope - optional; default is “video” (seekbar represents full duration of video); if set to “chapter” seekbar represents the duration of the current chapter only

Metadata is added using the <track> element with kind=”metadata”. It must be in Web Video Text Tracks format ( WebVTT ). Able Player supports two types of metadata:

“text” - The WebVTT file contains text, intended to be written to an external container at the designated times. You must provide the external container; Able Player does not generate that automatically.

“selector” - The WebVTT file contains jQuery selectors which target hidden content that is already present on the web page. At the designated times, the hidden content referenced by the jQuery selectors is made visible. In addition to selectors, the WebVTT file can contain either of the following keywords, each on a line by itself:

• PAUSE instructs Able Player to pause the video at that point.
• FOCUS: followed by a jQuery selector, places keyboard focus on the designated element, which should have a tabindex attribute with a value of either “0” (element is part of the regular tab order) or “-1” (element is not part of the regular tab order, but can receive focus in this context via JavasScript).

This combination of exposing new content, pausing the video, and placing keyboard focus on a newly exposed element, can be used to provide supplemental content including clickable “hot spots” overlaid on the video.

The following attributes make all this possible:

• data-meta-type - required for metadata; indicates the type of metadata contained within a metadata track. Supported values as described above are “text” and “selector”.
• data-meta-div - required for “text” metadata; id of an external div in which to display the text.
• data-duration - optional attribute on the element displayed via a metadata track; value is the number of milliseconds to display the element before it fades out. Elements displayed via metadata tracks automatically fade out at the end time designated within the WebVTT file. However, if the data-duration attribute is present, this enables an element to fade out before the designated time. This is useful if multiple elements appear simultaneously, but some need to fade out earlier than others.

NOTE: If you’re using metadata to expose content in sync with videos hosted on YouTube, please review YouTube’s Terms of Service related to Overlays and Frames. As of August 11, 2016: “You must not display overlays, frames, or other visual elements in front of any part of a YouTube embedded player, including player controls. Similarly, you must not use overlays, frames or other visual elements to obscure any part of an embedded player, including player controls.”

• data-search - optional; search terms to search for within the caption tracks, separated by a space
• data-search-lang - optional; specify 2-character language code of caption or subtitle track to search. If unspecified, searches the default language, which is the language of the web page if specified using the lang attribute on either the <html> or <body> tag.
• data-search-div - optional; id of external container in which to display search results

Fallback Player

• data-test-fallback - optional; force browsers to display the fallback content that will be shown to users with older browsers that don’t support HTML5 media.

The following attributes are supported on the <video> element only:

• data-allow-fullscreen - optional; if set to “false” the player will not include a fullscreen button
• data-youtube-id - optional; 11-character YouTube ID, to play the YouTube video using Able Player .
• data-youtube-desc-id - optional; 11-character YouTube ID of the described version of a video. See the section below on YouTube Support for additional information.
• data-youtube-nocookie - optional; if set to “true” the YouTube video will be embedded using the “youtube-nocookie.com” host.
• data-vimeo-id - optional; ID of a video on Vimeo, to play the Vimeo video using Able Player .
• data-vimeo-desc-id - optional; ID of the described version of a video on Vimeo. See the section below on Vimeo Support for additional information.
• height - height of the video in pixels.
• poster - path to an image file. Will be displayed in the player until the video is played.

If width and height are omitted, the player will be sized to fit its container.

The following additional features are supported by Able Player :

Multiple source files

As with audio, we recommend including two versions of each video, one in H.264 (MP4) and another in WebM or OGG for browsers that don’t support MP4. Browsers will play the first media source that they support.

Closed Captions

Captions are added using the <track> element with kind=”captions”. Captions must be in Web Video Text Tracks format ( WebVTT ). WebVTT tags within captions are currently ignored.

NOTE: Able Player only supports valid WebVTT files. Be sure to validate your WebVTT using a WebVTT Validator .

If captions are provided, a CC button will be added to the Able Player controller.

Audio Description

Supplemental description of key visual content for blind users can be added using one of two methods.

The first method is the same as closed captions, a <track> element, with kind=”descriptions”. This points to a WebVTT file, which is essentially the same as a closed caption file, but its contents are description text rather than captions. With this method, description text is read aloud by browsers that support the Web Speech API ; otherwise it’s written to an ARIA live region, so supporting screen readers will automatically announce the new text as soon as it is written to the page.

The second method is to produce a separate video with description mixed in. If multiple video sources are already provided (e.g., an MP4 and WebM file), then the described version must be available in both of these formats. For each video source that has a described version available, add a data-desc-src attribute to the <source> element for that video. The value of this attribute is a path pointing to the described version of the video. With this method, the described version of the video can be played instead of the non-described version, and the two versions can be swapped with clicking the “D” button on the controller.

If descriptions are available using either of the above methods, a Description toggle button appears on the controller (represented by the universal Description symbol, the letter “D”). How descriptions are ultimately delivered depends on which of the above methods is used.

If both methods are used, description will be delivered using the separate described version of the video. However, the WebVTT file will be used to (a) display the description text visibly (if users have selected this option in their preferences), and (b) incorporate the description text into the auto-generated interactive transcript. Therefore, it is important for the WebVTT description file to be accurately synchronized with the separate described version of the video.

In some applications, text-based descriptions might be a required part of the interface (e.g., if video pauses so users can interact with HTML overlays; text-based description could be used in this context to provide additional instructions for screen reader users). In such cases the Descriptions button can be eliminated from the controller with data-use-descriptions-button=”false” .

In other applications, a WebVTT descriptions file might be used solely for the purposes of displaying visible description text or incorporating description text into the auto-generated transcript, and the WebVTT description text is not intended to be read aloud by screen readers or browsers (for example, if the sole video source is a described video). In such cases, use data-descriptions-audible=”false” to prevent browsers and screen readers from announcing changes to the description text.

Sign language

Sign language translation is supported in a separate video player, synchronized with the main player. Tips for filming a sign language interpreter are available from Signing Books for the Deaf :

• Filming the Signer
• Editing the Signer

If multiple video sources are already provided (e.g., an MP4 and WebM file), then the sign language video must be available in both of these formats. For each video source that has a sign language version available, add a data-sign-src attribute to the <source> element for that video. The value of this attribute is a path pointing to the sign language version of the video. If a sign language version is available, a sign language button will be added to the media controller. This button will toggle the display of a pop-up window in which the sign language video will appear. Users can move or resize the pop-up window with either mouse or keyboard.

Unfortunately this feature is not currently supported on iOS.

Setup Step 4: Review User-Defined Variables in ableplayer.js

The JavaScript file initialize.js includes a block of user-defined variables that can be modified from their default settings, such as volume, color of controller buttons, seek interval for rewind and forward buttons, and others. Explanations of each variable are provided in the comments.

If you make changes to this or any other JavaScript script files, the player will need to be recompiled before your changes will take effect. To do so, run the shell script compile.sh .

An Able Player playlist is an HTML list of tracks. A playlist can accompany either a video or audio player, but both audio and video cannot be combined within a single playlist. The list can be either ordered ( <ol> ) or unordered ( <ul> ).

The following attributes are supported on the list element:

• class - required; must be able-playlist
• data-player - required; must reference the ID of the media player in which the playlist should be played.
• data-embedded - optional; add this attribute if you want your playlist to be embedded into the media player. If this attribute is omitted, the playlist will be external to the player and will appear wherever you place it on the web page.

Within the playlist, each list item can include the following HTML attributes:

• data-poster - path to an image file.
• width - width of the video in pixels.

The following HTML elements must be nested inside each list item:

• A <span> element with class=”able-source” for each <source> element that is to accompany the media. When the user selects an item from the playlist, its able-source <span> elements will be copied to <source> elements and loaded for playback. For each attribute that will ultimately be on the media’s <source> elements, add the same attributes to each <span> , prefaced with data- .

Within the playlist, each list item must include the following HTML elements:

• A <span> element with class=”able-track” for each <track> element that is to accompany the media. When the user selects an item from the playlist, its able-track <span> elements will be copied to <track> elements and loaded for playback. For each attribute that will ultimately be on the media’s <track> elements, add the same attributes to each <span> , prefaced with data- .
• A <button> element with type=”button” . Inside the button, include either text, an image, or both. This content would typically be the title of the item. If using an image alone, be sure to add a meaningful alt attribute. If the image is purely decorative and is accompanied by text, using alt=”“ .

The following example shows a playlist with two videos. The first video has one source (an MP4 file), and two tracks (captions and descriptions). The second video is hosted on YouTube, and has both a non-described and described version. It also has a locally-hosted chapters track. Able Player supports mixed playlists, with videos hosted locally or on YouTube. Vimeo videos are not yet supported within playlists.

For additional examples of both audio and video playlists, see the Able Player Examples page.

Supported data-* audio types:

Supported data-* video types:

• webm or webmv

When a playlist is included on a page, the <source> elements within the <audio> or <video> tags are optional. If they are provided, they should match the first item in the playlist.

Interactive Transcript

Able Player interactive transcripts are generated automatically from WebVTT chapters, descriptions, and captions/subtitles files. If a transcript is available, a Transcript button will be added to the Able Player controller.

Features of the interactive transcript include the following:

• Clicking anywhere in the transcript starts playing the media at that point.
• This same functionality is accessible to keyboard users, who can tab through the transcript and press Enter at any point to start playing the media at that point. Since this creates a lot of extra tab stops on the page, this might be undesirable functionality for some keyboard users so it’s disabled by default. It can be toggled on/off in the Preferences dialog.
• Text in the transcript is highlighted as the media plays. This can be toggled on/off in the Preferences dialog.
• If subtitles are available, the transcript can be displayed in any supported language. Available languages can be selected from a dropdown select field.

If the transcript is assembled from multiple sources, any timing imperfections between sources come sometimes lead to problems in the read order within the transcript. For example, a new chapter should start before any captions or descriptions within that chapter. If the chapter starts a millisecond later than its first caption, the chapter name will appear in the transcript as a heading after its first caption. To help authors/developers attain perfect synchronization between all timed text files, Able Player (in version 3.1.6) introduced a Video Transcript Sorter (VTS). The VTS displays all timed text content from all sources in a table, and provides several features that enable users to rearrange content and modify start and end times. Users can also insert new content into the table, which can be useful for authoring low frequency content such as chapters and description. Too use VTS, add the following HTML to the desired location within any web page that includes an Able Player instance:

YouTube Support

To play a YouTube video in Able Player , simply include a data-youtube-id attribute on the <video> element. The value of this attribute must be the video’s 11-character YouTube ID.

If a described version of the video is available on YouTube, include a data-youtube-desc-id attribute on the <video> element. The value of this attribute must be the 11-character YouTube ID of the described version. If users turn on the Description button on their player controller, the described version of the video will be loaded instead of the non-described version.

Versions 2.3.1 through 3.2.12 required a YouTube Data API key for retrieving caption data from YouTube. Get a YouTube Data API key by registering your application at the Google Developer Console . For complete instructions, see Google’s Getting Started page . Note: All that’s needed for playing YouTube videos in Able Player is a simple API key, not OAuth 2.0.

After obtaining your YouTube Data API Key, insert the following code into your HTML page:

Starting with version 3.2.13, Able Player no longer requires a YouTube Data API key in order to access caption tracks from YouTube. However, an API key is still encouraged, as it relies on well-documented methods from Google, whereas operating without an API key relies on methods that are not well documented, and therefore may not be reliable.

Also new in 3.2.13, Able Player now handles YouTube captions in the same way it handles HTML <track kind="captions"> elements. The display of the caption text can be customized via the Preferences menu, and the caption text is used to automatically create an interactive transcript.

YouTube does not currently support chapters, descriptions, and metadata tracks. With Able Player, these features can be added to the video using HTML <track> elements, even if the video’s captions and subtitles are stored on YouTube. The advantage of managing captions entirely on YouTube is that you only have to manage them in one place, and they’re available everywhere your YouTube video is played.

If your video has HTML <track> elements for captions and subtitles, these will be used instead of the captions on YouTube.

Adjustable playback rate is available for some videos.

Vimeo Support

To play a Vimeo video in Able Player , simply include a data-vimeo-id attribute on the <video> element. The value of this attribute must be the video’s Vimeo ID (a string of numbers).

If a described version of the video is available on Vimeo, include a data-vimeo-desc-id attribute on the <video> element. The value of this attribute must be the Vimeo ID of the described version. If users turn on the Description button on their player controller, the described version of the video will be loaded instead of the non-described version.

Note that Vimeo currently has some limitations:

• A Plus, Pro or Business account is required in order to hide Vimeo’s default controller. If videos are hosted on a free account, the Vimeo controller and Able Player controller are both shown. The Vimeo controller disappears temporarily after playback begins, but until then having both players present is cluttered and confusing.
• A Pro or Business account is required in order to change playback rate (with faster and slower buttons). This functionality is not supported with a Plus account. Even with a Pro or Business account, this feature is off by default and “Speed controls” need to be enabled within the settings for each video.
• Able Player can display captions if they’re hosted on Vimeo. However, if the user changes their caption display preferences in Able Player, that has no effect on the Vimeo captions. Also, Able Player is unable to auto-generate an interactive transcript if captions are hosted on Vimeo. For captions that support user display preferences and that can be repurposed as an interactive transcript, captions and subtitles must be stored locally and referenced with a <track> element. If captions and subtitles are provided both on Vimeo and locally, the local captions will take precedence in order to provide full functionality.

If your media doesn’t play, one possibility is that your web server is attempting to serve up the media with the incorrect MIME type. On Apache, this can be correct by adding the following commands to the .htaccess file:

If you don’t have access to your server’s .htaccess file, you should be able to view and add MIME types somewhere within your server’s control panel.

If your site is running on a Windows server, consult the documentation from Microsoft. For example:

• Configuring MIME Types in IIS 7
• How to add MIME Types with IIS7 Web.config

Keyboard Shortcuts

Able Player includes several keyboard shortcuts that enable users to control the player from anywhere on the web page, as follows:

• p or spacebar = Play/Pause
• f = Forward
• b = Back (previous track in playlist)
• n = Next (next track in playlist)
• c = Captions
• d = Description
• m = Mute on/off
• v or 1-9 = Volume
• e = Preferences

Note that modifier keys (Alt, Control, and Shift) can be assigned by clicking the Preferences button on the player. If users find that shortcut keys aren’t working as advertised, they might have better success by selecting different combinations of modifier keys to accompany the default shortcut keys.

By default, keyboard shortcuts must be accompanied by Alt + Control.

User Preferences

One of Able Player’s accessibility features is that the player is highly customizable by users. The controller includes a Preferences button that allows users to change default preferences and settings. Their changes are stored in a browser cookie and in most cases should therefore be preserved the next time they visit the site. Specifically, users can control the following:

• Modifier keys: Add Alt , Ctrl , or Shift to the Able Player keyboard shortcuts to avoid conflicts with other applications.
• Closed captions on by default
• Description on by default
• Use text-based description if available.
• Automatically pause video when text-based description starts
• If using text-based description, make it visible
• Transcript on by default
• Highlight transcript as video plays
• Keyboard-enable transcript

Building the Able Player source

The source JavaScript files for Able Player are in the /scripts directory, and the source CSS files are in the /styles directory. These source files are ultimately combined into several different files (in the /build directory) using npm and Grunt :

The npm and Grunt build process is defined by the Gruntfile.js and package.json files. (Note that the version number is specified in package.json , and must be updated when a new version is released).

Files created by the build process are put into the /build directory:

• build/ableplayer.js - the default build of ableplayer.js
• build/ableplayer.dist.js - a build of ableplayer.js without console logging
• build/ableplayer.min.js - a minified version of the dist file
• build/ableplayer.min.css - a minified combined version of all Able Player CSS files

Acknowledgments

• Able Player development is supported in part by the AccessComputing project at the University of Washington, with financial support from the National Science Foundation (grants #CNS-0540615, CNS-0837508, and CNS-1042260).
• Additional support has been provided by the Committee on Institutional Cooperation (CIC).
• Turtle and rabbit icons (available as optional alternatives for the speed buttons) are provided courtesy of Icons8 .
• Sample video tracks are provided courtesy of The DO-IT Center at the University of Washington. Additional videos are available on the DO-IT Video website, which uses Able Player.

Sample audio tracks feature songs by Terrill Thompson, Able Player’s creator and lead developer. Check out Terrill’s music site for more listening, and to support his work.

Videojs.com

Make your player yours with the world's most popular open source html5 player framework.

Why Video.js?

Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and modern streaming formats, as well as YouTube and Vimeo.

It supports video playback on desktop and mobile devices. The project was started mid 2010, and now has hundreds of contributors and is used on over 450,000 websites.

Plays anything

Plays “traditional” file formats such as MP4 and WebM, but also supports adaptive streaming formats such as HLS and DASH. There’s even a special UI for live streams!

Easy to style

Video.js is designed to be a reliable and consistent base to build on top of. The player looks great out of the box, but can be easily styled with a little bit of extra CSS.

100s of plugins

When you need to add additional functionality, a well-documented plugin architecture has your back. The community has already built hundreds of skins and plugins that you can install, such as Chromecast, IMA, even VR.

Supported everywhere

Your video should work everywhere your app does. The team makes an effort to support every modern browser we can, including desktop and mobile.

Built by the community, used by the professionals

Playlist plugin

The advanced example includes the playlist plugin, along with some useful details such as what all of the player properties are, and what events have fired and how often.

The folks who help make this happen

Brightcove is the main sponsor of the project, employing many of the core members and investing thousands of engineering hours every year in Video.js and Video.js plugins.

The Brightcove Player is built on Video.js and used on thousands of video websites, ensuring Video.js can handle the most professional use cases.

Implementation

When to use Video.js over the <video> element?

Get involved

We make it easy for anyone to jump in and be a part of the Video.js community.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

Livestreaming web audio and video

Livestreaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, livestreaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article, we'll introduce you to the subject and let you know how you can get started.

The key consideration when streaming media to a browser is the fact that rather than playing a finite file we are relaying a file that is being created on the fly and has no pre-determined start or end.

Key differences between streamed and static media

In this case, we are using static media to describe media that is represented by a file, whether it be an mp3 or WebM file. This file sits on a server and can be delivered — like most other files — to the browser. This is often known as a progressive download.

Livestreamed media lacks a finite start and end time rather than a static file, it is a stream of data that the server passes on down the line to the browser and is often adaptive (see below). Usually, we require different formats and special server-side software to achieve this.

Adaptive streaming

One of the main priorities for livestreaming is to keep the player synchronized with the stream: adaptive streaming is a technique for doing this in the case of low bandwidth. The idea is that the data transfer rate is monitored and if it looks like it's not keeping up, we drop down to a lower bandwidth (and consequently lower quality) stream. In order to have this capability, we need to use formats that facilitate this. Livestreaming formats generally allow adaptive streaming by breaking streams into a series of small segments and making those segments available at different qualities and bit rates.

Streaming Audio and Video on Demand

Streaming technology is not used exclusively for live streams. It can also be used instead of the traditional progressive download method for Audio and Video on demand:

There are several advantages to this:

• Latency is generally lower so media will start playing more quickly
• Adaptive streaming makes for better experiences on a variety of devices
• Media is downloaded just in time which makes bandwidth usage more efficient

Streaming Protocols

While static media is usually served over HTTP, there are several protocols for serving adaptive streams; let's take a look at the options.

For now, HTTP is by far the most commonly supported protocol used to transfer media on demand or live.

Real Time Messaging Protocol (RTMP) is a proprietary protocol developed by Macromedia (now Adobe) and supported by the Adobe Flash plugin. RTMP comes in various flavors including RTMPE (Encrypted), RTMPS (Secure over TLS/SSL) and RTMPT (encapsulated within HTTP requests).

Note: Real Time Streaming Protocol (RTSP) controls media sessions between endpoints and is often used together with Real-time Transport Protocol (RTP) and with Real-time Control Protocol (RTCP) for media stream delivery. Using RTP with RTCP allows for adaptive streaming. This is not yet supported natively in most browsers.

Some vendors implement propriety transport protocols, such as RealNetworks and their Real Data Transport (RDT).

RTSP 2.0 is currently in development and is not backward compatible with RTSP 1.0.

Warning: Although the <audio> and <video> tags are protocol agnostic, no browser currently supports anything other than HTTP without requiring plugins, although this looks set to change. Protocols other than HTTP may also be subject to blocking from firewalls or proxy servers.

Using streaming protocols

The process of using the various protocols is reassuringly familiar if you are used to working with media over HTTP.

For example:

Media Source Extensions (MSE)

Media Source Extensions is a W3C working draft that plans to extend HTMLMediaElement to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.

For example, you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE .

Note: Time Shifting is the process of consuming a live stream sometime after it happened.

Video Streaming File Formats

A couple of HTTP-based livestreaming video formats are beginning to see support across browsers.

Note: You can find a guide to encoding HLS and MPEG-DASH for use on the web at Setting up adaptive streaming media sources .

DASH stands for Dynamic Adaptive Streaming over HTTP. It is supported via Media Source Extensions which are used by JavaScript libraries such as DASH.js . This approach allows us to download chunks of the video stream using XHR and "append" the chunks to the stream that's played by the <video> element. So for example, if we detect that the network is slow, we can start requesting lower quality (smaller) chunks for the next segment. This technology also allows an advertising segment to be appended/inserted into the stream.

Note: You can also use WebM with the MPEG DASH adaptive streaming system .

HLS or HTTP Live Streaming is a protocol invented by Apple Inc and supported on iOS, Safari and the latest versions of Android browser / Chrome. HLS is also adaptive.

HLS can also be decoded using JavaScript, which means we can support the latest versions of Firefox, Chrome and Safari. See this HTTP Live Streaming JavaScript player .

At the start of the streaming session, an extended M3U (m3u8) playlist is downloaded. This contains the metadata for the various sub-streams that are provided.

Audio Streaming File Formats

There are also several audio formats:

Opus is a royalty-free and open format that manages to optimize quality at various bit-rates for different types of audio. Music and speech can be optimized in different ways and Opus uses the SILK and CELT codecs to achieve this.

Currently, Opus is supported by Firefox desktop and mobile as well as the latest versions of desktop Chrome and Opera.

Note: Opus is a mandatory format for WebRTC browser implementations.

MP3, AAC, Ogg Vorbis

Most common audio formats can be streamed using specific server-side technologies.

Note: It's potentially easier to stream audio using non-streaming formats because unlike video there are no keyframes.

Server-side Streaming Technologies

In order to stream live audio and video, you will need to run specific streaming software on your server or use third-party services.

GStreamer is an open source cross-platform multimedia framework that allows you to create a variety of media-handling components, including streaming components. Through its plugin system, GStreamer provides support for more than a hundred codecs (including MPEG-1, MPEG-2, MPEG-4, H.261, H.263, H.264, RealVideo, MP3, WMV, and FLV.)

GStreamer plugins such as souphttpclientsink and shout2send exist to stream media over HTTP or you can also integrate with Python's Twisted framework.

For RTMP transfer you can use the Nginx RTMP Module .

SHOUTcast is a cross-platform proprietary technology for streaming media. Developed by Nullsoft, it allows digital audio content in MP3 or AAC format to be broadcast. For web use, SHOUTcast streams are transmitted over HTTP.

Note: SHOUTcast URLs may require a semicolon to be appended to them .

The Icecast server is an open source technology for streaming media. Maintained by the Xiph.org Foundation , it streams Ogg Vorbis/Theora as well as MP3 and AAC format via the SHOUTcast protocol.

Note: SHOUTcast and Icecast are among the most established and popular technologies, but there are many more streaming media systems available .

Streaming Services

Although you can install software like GStreamer, SHOUTcast and Icecast you will also find a lot of third-party streaming services that will do much of the work for you.

• HTTP Live Streaming
• HLS Browser Support
• HTTP Live Streaming JavaScript player
• The Basics of HTTP Live Streaming
• DASH Adaptive Streaming for HTML 5 Video
• Dynamic Adaptive Streaming over HTTP (MPEG-DASH)
• MPEG-DASH Media Source Demo
• DASH Reference Client
• Dynamic Streaming over HTTP
• The State of MPEG-DASH Deployment
• Look, no plugins: Live streaming to the browser using Media Source Extensions and MPEG-DASH
• Media Source Extensions (W3C)
• Streaming GStreamer Pipelines Via HTTP
• GStreamer and Raspberry Pi
• Comparison of Streaming Media Systems
• Mozilla Hacks - Streaming Media on demand with Media Source Extensions

HTML5 Video Player 4+

Shenzhen socusoft co., ltd.

• 1.1 • 7 Ratings

Screenshots

Description.

HTML5 Video Player software is the easiest way for you to encode your video to HTML5 video compatible format and embed into your own website with a few mouse clicks. Key Features: * Encode video files to HTML5 video compatible format(include MP4, WebM, Ogv) in a batch mode. * Support all modern and old web browser with HTML5 video and Flash fallback. * iPad/iPhone and mobile device compatible. If you are looking for the best way to put video media on your own website, you got the right place. Our HTML5 Video Player software provides a one-stop solution for you to encode your video files and embed into your own website in minutes. HTML5 Video Player works as easy as 1-2-3. You just need to add your video source file, pickup a theme then the web page is ready for you to upload and publish. HTML5 Video Player integrates video converter function in the software. It can convert from almost all the video formats and encode it to HTML5 video compatible format needed for all popular browsers: include MP4, WebM, OGG video(.ogv). HTML5 Video Player software also supplies a basic video editor function, you can preview, trim,rotate and flip your video source files. HTML5 Video Player software plays your online video on all popular web browser. The video player uses HTML5 video tag which is compatible with all latest version of browsers, including IE9, Firefox, Chrome, Opera, iPhone/iPad/Android mobile browsers. While HTML5 video is not supported on old version browsers, HTML5 Video Player software will fallback to Flash object to play your video which ensure your videos play smoothly on all browsers. If any questions, please send us an email to [email protected], website: http://www.html5videoplayer.net

Ratings and Reviews

Didn't work.

Tried converting videos and it just didn't work at all. Just kept flashing up that it was processing over and over again, but nothing ever happened. Support was not customer focused at all. They only responded back if I pestered them and gave no solution to the issue I have with the software. Spend your money elsewhere, you'll be happy you did.

VERY Limited

This app is only good if you are going to play one video at a time. There is no option to begin playing your videos in your playlist and letting them all play without having to select each individual video and clicking play. Not what I was looking for. Wasted $40 on this.

This App is a complete rip-off! I want my money back now!!!!!

App opens fine. HOWEVER… once you try to drag-n-drop any video file to the app for conversion it crashes immediately. This app doesn’t deserve a star. It’s literally a scam.

App Privacy

The developer, Shenzhen Socusoft Co., Ltd , has not provided details about its privacy practices and handling of data to Apple.

No Details Provided

The developer will be required to provide privacy details when they submit their next app update.

Information

English, Japanese

• Developer Website
• App Support

Family Sharing

Up to six family members can use this app with family sharing enabled., more by this developer.

Ringtone Maker:Customize music ring tone,text tone

Wireless Transfer

Photo Slideshow Director

Video Slimmer App

Video to Photo Grabber

TopScanner : PDF Scanner App

A simple, accessible and customisable media player for HTML5 Video , HTML5 Audio , YouTube YouTube and Vimeo Vimeo

• HTML5 View From A Blue Moon © Brainfarm
• HTML5 Kishi Bashi – “It All Began With A Burst” © Kishi Bashi
• View From A Blue Moon on  YouTube YouTube
• Toob “Wavaphon” Music Video on  Vimeo Vimeo

Use Safari extensions on your Mac

Safari extensions enhance and customize the browsing experience on your Mac. Here's how to install them, uninstall them, or share them across devices.

Safari extensions add functionality to Safari, so you can explore the web the way you want. Extensions can show helpful information about a webpage, display news headlines, help you use your favorite services, change the appearance of webpages, and much more. Extensions are a great way to personalize your browsing experience.

Install extensions

Turn on extensions, turn off extensions, uninstall extensions, share extensions across devices.

Use the App Store to conveniently download and install Safari extensions. All extensions in the App Store are reviewed, signed, and hosted by Apple for your security, and they're automatically kept up to date.

Start by installing the latest macOS updates to make sure that Safari is up to date. You need Safari 12 or later to get Safari extensions from the App Store.

Open Safari and choose Safari > Safari Extensions from the menu bar.

The App Store opens to the Safari Extensions page. To download and install an extension, click Get or click the price. You might be asked to sign in with your Apple ID.

Click Install.

After the extension is installed, click Open and follow the onscreen instructions provided by the extension.

After installing an extension, follow these steps to turn it on.

Choose Safari > Settings (or Preferences).

Click Extensions.

Select the checkbox next to the extension's name. Learn what to do if you can't turn on extensions .

If you're browsing privately, or using a profile or web app

When browsing in a private window in macOS Sonoma or later, all extensions that require website access are turned off by default. To use an extension when browsing privately:

Choose Safari > Settings.

Select the extension in the sidebar, then select “Allow in Private Browsing” on the right.

Whether or not you're browsing privately, you can also restrict the extension's access to certain websites. Click the Edit Websites button to view the extension in Websites settings. From there you can allow access, deny access, or require that websites ask you for access.

When using Safari profiles , extensions for the default profile are managed in the main Extensions tab of Safari settings. Extensions for other profiles are managed in the Profiles tab, which has its own Extensions tab for each profile. By default, extensions are turned off for each new profile.

Choose Safari > Settings (or Preferences), then click Extensions.

To turn off an extension, deselect its checkbox.

If you can't determine what an extension does, or you don't expect to use it again, you should uninstall it.

To uninstall an extension, select the extension and click the Uninstall button.

Starting with macOS Ventura, iOS 16, and iPadOS 16, you can share extensions across your Mac, iPhone, and iPad:

On your Mac, open Safari and choose Safari > Settings, then click Extensions. Select “Share across devices” at the bottom of the window.

On your iPhone or iPad, go to Settings > Safari > Extensions, then turn on Share Across Devices.

To uninstall an extension from all devices, you must uninstall it on each device.

Safari no longer supports most web plug-ins. To load webpages more quickly, save energy, and strengthen security, Safari is optimized for content that uses the HTML5 web standard, which doesn't require a plug-in. To enhance and customize your browsing experience, use Safari extensions instead of web plug-ins.

Information about products not manufactured by Apple, or independent websites not controlled or tested by Apple, is provided without recommendation or endorsement. Apple assumes no responsibility with regard to the selection, performance, or use of third-party websites or products. Apple makes no representations regarding third-party website accuracy or reliability. Contact the vendor for additional information.

Explore Apple Support Community

Find what’s been asked and answered by Apple customers.

• Privacy Policy

Unleashing the Power of HTML5 Audio Player: A Comprehensive Guide

Unleashing the Power of Audio in HTML5: A Comprehensive Guide

The HTML5 Audio Player is a powerful tool that allows web developers to embed audio content directly into their web pages, opening up endless possibilities for creating immersive and interactive websites.

Table of Contents

1. Introduction:

In the world of web design, creating a dynamic and engaging user experience is crucial. While visuals play a significant role in captivating users, audio can add a whole new dimension to the online experience. The <audio> tag in HTML5 is a powerful tool that allows web developers to embed audio content directly into their web pages, opening up endless possibilities for creating immersive and interactive websites.

The introduction of the <audio> tag has revolutionized the way audio is integrated into websites. With just a few lines of code, you can easily embed audio files, such as music, sound effects, or spoken content, directly into your HTML document. This means that visitors to your website can listen to audio content without the need for external media players or plugins.

The <audio> tag provides a standardized way to control audio playback, allowing users to play, pause, rewind, and adjust the volume of the audio content. It also supports various audio formats, such as MP3, WAV, and Ogg Vorbis, ensuring compatibility across different browsers and devices.

One of the significant advantages of using the <audio> tag is its accessibility. By providing alternative text, transcripts, or captions for the audio content, you can make your website inclusive and accessible to a wider audience, including individuals with visual impairments or hearing disabilities.

Moreover, the <audio> tag offers flexibility in terms of customization. You can style the audio player to match the design of your website, making it seamlessly blend with the overall visual aesthetic. Additionally, with the help of JavaScript, you can programmatically control the playback of the audio, enabling more interactive and dynamic user experiences.

HTML5, the latest version of the Hypertext Markup Language, introduces powerful features for multimedia integration, including the <audio> tag. This tag allows web developers to embed audio content directly into their HTML documents, making it easier than ever to provide audio experiences to users.

Importance of HTML5 Audio Player in enhancing user experience on websites?

I. The Power of HTML5 Audio Player in Web Design:

• Audio can create a more immersive and interactive experience, capturing users’ attention and keeping them engaged.
• Background music, sound effects, and audio cues can enhance the overall atmosphere and emotional impact of a website.
• Audio can be an effective way to deliver information to users, such as narrations, podcasts, or interviews.
• Voice-overs or audio descriptions can provide accessibility options for visually impaired users.
• Music and sound can evoke emotions, setting the mood and tone of a website.
• Well-chosen audio elements can create a memorable and impactful user experience.

II. Introduction to the <audio> Tag:

• The <audio> tag is a self-contained element that allows you to embed audio content directly within your HTML document.
• It follows a simple syntax: <audio src="audio-file.mp3"></audio> .
• The “src” attribute specifies the source URL of the audio file.
• HTML5 supports various audio formats, including MP3, WAV, and Ogg Vorbis.
• Different browsers have varying degrees of compatibility with these formats, so it’s essential to provide fallback options.
• The <audio> tag provides built-in controls for play, pause, volume adjustment, and seeking.
• By adding the “controls” attribute, users can interact with the audio player directly.
• You can apply CSS styles to the <audio> tag and its components to match your website’s design.
• Customizing the appearance of the audio player can contribute to a cohesive user experience.

III. Advanced Features and Techniques:

• JavaScript can be used to manipulate the <audio> element and control its playback programmatically.
• With the DOM API, you can access the <audio> element, modify its properties, and create custom interactions.
• Making audio content accessible to all users is crucial. Providing alternative text, transcripts, and captions ensures inclusivity.
• Implementing keyboard accessibility for audio controls allows users to navigate and interact with the player using the keyboard.
• Optimizing audio files for web delivery is essential for faster loading times and better user experience.
• Techniques such as compression, encoding, and preloading can help reduce file sizes and ensure smoother playback.
• Styling the audio player to match your website’s design is important for creating a cohesive and visually appealing user interface.
• Responsive design considerations ensure that the audio player adapts well to different screen sizes and devices.

IV. Best Practices for Using HTML5 Audio Player in Web Design:

• Ensure that audio elements enhance rather than distract from the overall user experience.
• Avoid autoplaying audio, provide clear controls, and offer options for muting or adjusting volume.
• Use audio content that you have the rights to, respecting copyright laws and licensing agreements.
• Seek permission or use royalty-free audio when necessary.
• Test audio playback on different browsers and devices to ensure compatibility.
• Provide fallback options, such as alternative audio formats or text-based content, for browsers that do not support certain formats.

Overview of HTML5’s <audio> tag and its capabilities?

HTML5 introduced the <audio> tag, which provides native support for embedding audio content directly into web pages without relying on external plugins or technologies. The <audio> tag offers various capabilities that enable web developers to integrate audio seamlessly into their HTML5-based websites. Here’s an overview of the <audio> tag and its capabilities:

• Audio playback: The primary purpose of the <audio> tag is to play audio files. It supports various audio formats, including MP3, WAV, Ogg Vorbis, and AAC. Developers can specify the audio file source using the “src” attribute within the <audio> tag.
• Controls: The <audio> tag provides built-in playback controls, such as play, pause, volume control, and seek bar, allowing users to interact with the audio content easily. Developers can enable or disable these controls using the “controls” attribute.
• Preloading: The <audio> tag supports preloading audio files, which allows the browser to start downloading the audio file in advance. This helps ensure smooth playback without interruption. The “preload” attribute can be set to “auto,” “metadata,” or “none” to control the preloading behavior.
• Looping: Developers can specify whether the audio should loop continuously using the “loop” attribute. When set to “loop,” the audio will play repeatedly until manually stopped or paused.
• Alternative content: To provide fallback options for browsers that do not support the <audio> tag or the specified audio format, developers can include alternative content within the <audio> tag. This can be text or other HTML elements that inform users about the audio content or provide alternative means of accessing it.
• Event handling: The <audio> tag supports a range of events that developers can utilize to enhance user interactions and customize the audio playback experience. Events such as “play,” “pause,” “ended,” and “volumechange” can be listened to using JavaScript, enabling developers to trigger specific actions or create custom controls.
• Styling and customization: Developers can apply CSS styles to the <audio> tag and its associated elements to customize the visual appearance of the audio player. This allows for seamless integration with the overall design of the website.
• Accessibility considerations: The <audio> tag supports accessibility features, allowing screen readers to interpret and announce the audio content to visually impaired users. Developers can include text alternatives or captions using the <track> element to ensure accessibility compliance.
• JavaScript API: The <audio> tag provides a JavaScript API that allows developers to control audio playback programmatically. This API enables advanced functionality, such as dynamically changing the audio source, manipulating playback options, or synchronizing audio with other interactive elements on the page.
• Mobile device support: The <audio> tag is compatible with mobile devices, making it possible to incorporate audio into mobile web applications. Mobile browsers can handle the playback and controls of audio content using the native audio player interface.

In summary, the <audio> tag in HTML5 offers a wide range of capabilities for embedding and controlling audio content within web pages. It provides native audio playback, built-in controls, preloading options, looping, event handling, and customization possibilities. With its accessibility features and JavaScript API, developers can create engaging and interactive audio experiences that seamlessly integrate with their HTML5-based websites.

2. Getting Started with the <audio> Tag

Explanation of the <audio> tag and its purpose:.

The <audio> tag is an HTML5 element used to embed audio content directly into a web page. It allows developers to include audio files, such as music, podcasts, or sound effects, without the need for external plugins or media players. The <audio> tag provides a built-in audio player interface, which can be customized using CSS, and allows users to control the playback of the audio content.

Syntax and basic usage of the <audio> tag:

The basic syntax of the <audio> tag is as follows:

In this example, the “src” attribute specifies the source URL of the audio file to be played. The “controls” attribute adds default audio playback controls to the audio player, such as play, pause, volume control, and progress bar. This allows users to interact with the audio content and control its playback.

Supported HTML5 Audio Player formats and browser compatibility:

The <audio> tag supports various audio formats, and the browser compatibility may vary depending on the format and the web browser being used. The most commonly supported audio formats include:

• MP3: It is widely supported across all modern web browsers, making it a popular choice for audio content.
• WAV: Another widely supported format that offers high audio quality, but produces larger file sizes compared to other formats.
• Ogg: This format is supported by most modern web browsers, providing a good alternative to MP3 for better file compression.

When using the <audio> tag, it is recommended to provide the audio content in multiple formats to ensure compatibility across different browsers. This can be achieved by including multiple <source> elements within the <audio> tag, each with a different audio format. The browser will then select and play the audio format that is supported by the user’s browser.

It’s important to note that browser compatibility for audio formats may change over time, so it’s advisable to check for the latest browser support for specific audio formats when developing web applications.

3. Playing Audio with Controls

Adding audio playback controls using the “controls” attribute:.

The “controls” attribute is a boolean attribute that can be added to the <audio> tag to include default audio playback controls in the audio player. When this attribute is present, the browser automatically adds controls such as play, pause, volume adjustment, and progress bar to the audio player. This allows users to interact with the audio content and control its playback without any additional coding.

Here’s an example of using the “controls” attribute in the <audio> tag:

In this example, the audio file “audio_file.mp3” will be displayed with default playback controls in the browser.

Controlling audio playback: play, pause, stop, and volume adjustment:

In addition to the default controls provided by the browser, you can also control audio playback programmatically using JavaScript. By accessing the <audio> element in the DOM (Document Object Model), you can manipulate its properties and methods to control the audio playback.

Here are some common methods and properties for controlling audio playback:

• play(): This method is used to start or resume audio playback.
• pause(): This method is used to pause audio playback.
• stop(): Since there is no built-in stop() method, you can achieve a stop effect by calling pause() and resetting the currentTime property to 0.
• volume: This property represents the volume level of the audio. It ranges from 0.0 (silent) to 1.0 (maximum volume). You can adjust the volume using this property.

Here’s an example of controlling audio playback programmatically using JavaScript:

In this example, we have added an id “myAudio” to the <audio> tag to easily access it in JavaScript. The playAudio(), pauseAudio(), stopAudio(), and adjustVolume() functions demonstrate how to control audio playback and volume programmatically.

Styling and customizing html5 audio player controls with CSS:

The appearance of the default audio controls can be customized using CSS. You can change the size, color, position, and other visual aspects of the controls to match your website’s design.

To style the audio controls, you can use CSS selectors to target specific elements within the <audio> tag. For example, you can target the progress bar, play button, volume control, etc., and apply styles accordingly.

Here’s an example of customizing the appearance of audio controls using CSS:

In this example, we use CSS selectors specific to WebKit-based browsers (e.g., Chrome, Safari) to target and style different parts of the audio controls. However, keep in mind that different browsers may use different selectors, so it’s important to test and ensure cross-browser compatibility when customizing audio controls with CSS.

4. Embedding Audio Files

Embedding audio files directly within the html document using the <source> tag:.

The <source> tag is used within the <audio> tag to specify multiple audio sources for different formats. By providing multiple <source> tags with different audio file formats, you ensure that the browser can choose the most appropriate format based on its compatibility. This technique is known as “progressive enhancement” and allows the browser to select the supported audio format for playback.

Here’s an example of embedding audio files using the <source> tag:

In this example, we provide three different audio file formats: MP3, Ogg, and WAV. The browser will try to play the audio using the first supported format it encounters in the <source> tags. If none of the formats are supported, the text “Your browser doesn’t support the audio tag” will be displayed as a fallback message.

Understanding different audio formats (MP3, WAV, Ogg) and their compatibility:

Different audio formats have varying levels of compatibility across different browsers and devices. Here’s a brief overview of the commonly used audio formats and their compatibility:

• MP3 (MPEG Audio Layer-3): MP3 is a widely supported audio format and is compatible with most modern web browsers and devices, including desktop and mobile platforms. It provides good audio quality with relatively small file sizes, making it a popular choice for web audio.
• Ogg: The Ogg format, specifically Ogg Vorbis, is an open-source audio format that offers high audio quality. It has good browser support, especially in Firefox and other browsers that support the Ogg format. However, support for Ogg may vary in some browsers and older devices.
• WAV (Waveform Audio File Format): WAV is an uncompressed audio format that provides high audio quality but produces larger file sizes compared to compressed formats like MP3 and Ogg. WAV files have good support in most browsers and devices but may not be the ideal format for web audio due to their larger size.

Providing fallback options for unsupported HTML5 Audio Player formats:

To ensure a better user experience, it’s important to provide fallback options for unsupported audio formats. This allows users whose browsers do not support certain audio formats to still access the audio content or receive alternative content.

In the previous example, the text “Your browser doesn’t support the audio tag” is provided as fallback content within the <audio> tag. This text will be displayed if none of the audio formats specified in the <source> tags are supported by the browser.

You can customize the fallback content based on your specific needs. For example, you can provide a link to download the audio file or offer alternative content, such as a text description or a related image. The fallback content should provide a meaningful alternative or explanation of the audio content for users who cannot access it.

By including fallback options, you ensure that your audio content remains accessible to a wider audience, even if their browsers do not support certain audio formats.

5. Controlling HTML5 Audio Player Programmatically

Manipulating audio playback programmatically using javascript:.

JavaScript provides powerful capabilities to manipulate audio playback dynamically. You can access the <audio> element and control its playback using the DOM API and JavaScript event handling.

Here are some common ways to manipulate audio playback programmatically:

• Accessing the <audio> element: You can use JavaScript to select and access the <audio> element in your HTML document. This allows you to interact with the audio element and modify its properties, such as the current time, volume, or playback state.
• Controlling playback: Once you have access to the <audio> element, you can control its playback using JavaScript. For example, you can play, pause, stop, or seek to a specific time in the audio.
• Modifying audio properties: JavaScript allows you to modify various properties of the <audio> element. For example, you can adjust the volume, mute or unmute the audio, or get information about the current playback status.

Accessing the <audio> element and its properties using the DOM API:

The DOM API (Document Object Model Application Programming Interface) provides methods and properties to access and manipulate HTML elements, including the <audio> element. You can use the DOM API to retrieve information about the audio and modify its properties.

Here’s an example of accessing the <audio> element and its properties using the DOM API:

The DOM API allows you to access properties like currentTime, volume, paused, duration, etc., which provide information about the audio element and its playback status.

Implementing custom playback controls and interactions:

With JavaScript, you can create custom playback controls and interactions for your audio element. This gives you the flexibility to design unique user experiences and add additional functionality beyond the default controls.

Here’s an example of implementing custom playback controls using JavaScript:

In this example, we have an audio element with the ID “myAudio” and two buttons: one for play and one for pause. Using JavaScript, we add event listeners to the buttons and call the play() and pause() methods of the audio element accordingly.

By implementing custom playback controls and interactions, you can create a tailored user experience for your audio content. You have full control over the behavior and appearance of the controls, allowing you to match them with the design and functionality of your website or application.

6. Advanced HTML5 Audio Player Features

Looping html5 audio player playback with the “loop” attribute:.

The “loop” attribute in the <audio> tag allows you to specify whether the audio should automatically restart from the beginning once it reaches the end. When the “loop” attribute is present and set to the “loop” value, the audio will play continuously in a loop.

Here’s an example of using the “loop” attribute:

In this example, the audio file specified by the “src” attribute will play in a continuous loop. When the audio reaches the end, it will automatically restart from the beginning, providing a seamless looping effect.

Adding subtitles or captions to HTML5 Audio Player using the <track> tag:

The <track> tag is used to specify text tracks, such as subtitles or captions, for audio or video elements. It provides a way to include synchronized text content that corresponds to the audio being played.

To add subtitles or captions to an audio element, you can use the <track> tag within the <audio> tag, like this:

In this example, we have an audio element with the “src” attribute pointing to the audio file. Inside the <audio> tag, we include a <track> tag that specifies the source file for the subtitles (“subtitles.vtt”). The “kind” attribute is set to “subtitles” to indicate that it contains subtitle content. The “srclang” attribute specifies the language of the subtitles, and the “label” attribute provides a label or description for the subtitles.

Implementing audio playback events and event handling:

HTML5’s <audio> tag provides a set of events that allow you to listen for various playback-related actions and respond to them with custom JavaScript code. These events enable you to enhance the user experience, synchronize actions, or perform additional functionality based on the audio playback.

Here are some commonly used audio playback events:

• “play”: Triggered when the audio playback starts.
• “pause”: Triggered when the audio playback is paused.
• “ended”: Triggered when the audio playback reaches the end.
• “timeupdate”: Triggered continuously as the audio playback progresses, allowing you to update progress bars or display current time information.

To handle these events, you can use JavaScript event listeners and attach them to the <audio> element. Here’s an example:

In this example, we attach event listeners to the <audio> element using the addEventListener method. When a specific event occurs, such as “play,” “pause,” “ended,” or “timeupdate,” the corresponding event handler function is executed.

By utilizing audio playback events and event handling, you can create interactive and responsive audio experiences. You can update UI elements, synchronize actions with audio playback, or trigger custom functionality based on the user’s interaction with the audio.

7. Enhancing HTML5 Audio Player Accessibility

Ensuring audio content is accessible to all users:.

Accessibility is an important aspect of web development, and it is crucial to ensure that audio content is accessible to all users, including those with disabilities. Here are some considerations for making audio content accessible:

• Provide a text alternative: Include a textual description or transcript of the audio content. This allows users who cannot hear the audio to understand the information or context provided by the audio. The text alternative can be placed near the audio element or provided through a link or button.
• Use captions or subtitles: If the audio contains spoken words, consider providing captions or subtitles for users who are deaf or hard of hearing. Captions can be synchronized with the audio and displayed as text on the screen, enabling users to read the spoken content.
• Offer sign language interpretation: For audio content that includes sign language interpretation, provide video or animated GIFs of the sign language interpretation alongside the audio. This ensures that users who rely on sign language can access the content.
• Provide audio descriptions: If the audio includes visual elements or actions that are important for understanding the content, provide audio descriptions. Audio descriptions describe the visual elements, allowing users who are blind or visually impaired to comprehend the full context of the audio.

Adding alternative text and transcripts for audio content:

Alternative text and transcripts play a vital role in making audio content accessible. Here’s how you can add them:

• Alternative text (alt text): When using the <audio> tag, you can provide alternative text for the audio file by using the “alt” attribute on the <audio> tag. This text should describe the audio content briefly. It is important to use descriptive alt text that conveys the purpose or information provided by the audio.
• Transcripts: A transcript is a text-based representation of the audio content, typically displayed alongside the audio player or provided as a downloadable file. It should include all spoken words, relevant sounds, and any important context conveyed through the audio. Users can read the transcript to access the full content of the audio.

Implementing keyboard accessibility for audio controls:

Keyboard accessibility is crucial to ensure that users who rely on keyboard navigation can interact with audio controls effectively. Here are some guidelines for implementing keyboard accessibility:

• Make audio controls focusable: Ensure that the audio player and its controls can receive keyboard focus by adding the tabindex attribute with a value of “0” to the <audio> element. This allows users to navigate to the controls using the keyboard.
• Provide keyboard shortcuts: Assign keyboard shortcuts to common audio control functions, such as play, pause, volume adjustment, or seeking. This allows users to trigger these actions directly using keyboard shortcuts, providing a more efficient and accessible user experience.
• Handle keyboard events: Listen for keyboard events on the audio player and its controls using JavaScript. Respond to key presses for controlling audio playback, volume adjustment, or seeking within the audio. Consider supporting standard keyboard shortcuts like Spacebar for play/pause or arrow keys for seeking.

By implementing keyboard accessibility, users can navigate and control audio playback using only the keyboard, enhancing the overall accessibility and usability of the audio content.

8. Optimizing HTML5 Audio Player Performance

Techniques for optimizing audio files for web delivery:.

Optimizing audio files for web delivery is essential to ensure fast loading times and a smooth user experience. Here are some techniques to optimize audio files:

• File format selection: Choose the appropriate audio format based on the requirements of your website and target audience. Common audio formats for the web include MP3, AAC, and Ogg Vorbis. Each format has its own compression algorithms and quality trade-offs, so consider the compatibility and file size implications when making your selection.
• Bitrate adjustment: Adjusting the bitrate of your audio files can significantly impact their file size. Lower bitrates result in smaller file sizes but may compromise audio quality. Find the right balance between file size and audio quality to ensure optimal web delivery.
• Audio compression: Utilize audio compression techniques to reduce file sizes without significant loss of quality. This can be achieved through various audio compression algorithms and codecs. Experiment with different compression settings to find the optimal balance between file size and audio fidelity.

Compression and encoding considerations for smaller file sizes:

When it comes to compressing and encoding audio files for smaller file sizes, consider the following:

• Bitrate: Lowering the bitrate of your audio files reduces the amount of data transmitted, resulting in smaller file sizes. However, be cautious not to set the bitrate too low, as it can negatively impact audio quality. Find the sweet spot where the file size is minimized while maintaining acceptable audio quality.
• Codec selection: Different audio codecs have varying levels of compression efficiency. Choose codecs that offer good compression while preserving audio quality. Popular codecs for web audio include MP3, AAC, and Ogg Vorbis. Compare the file sizes and audio quality achieved by different codecs to make an informed decision.
• Mono vs. Stereo: If stereo audio is not necessary for your content, consider using mono audio instead. Mono audio has half the channels of stereo audio, resulting in smaller file sizes.
• Variable Bit Rate (VBR): Instead of using a constant bitrate for the entire audio file, consider utilizing VBR encoding. VBR adjusts the bitrate dynamically based on the complexity of the audio, resulting in better audio quality for the same file size or smaller file sizes for the same audio quality.

Preloading and buffering strategies for smoother audio playback:

To ensure smoother audio playback and minimize interruptions, implement preloading and buffering strategies:

• Preloading: Use the “preload” attribute on the <audio> tag to indicate whether the audio should be preloaded. Set it to “auto” to instruct the browser to preload the audio file, “metadata” to load only essential information like duration and metadata, or “none” to disable preloading. Preloading allows the audio to start playing without delays.
• Buffering: As the audio plays, the browser buffers a portion of the audio file in advance to ensure uninterrupted playback. However, you can optimize buffering for a smoother experience. Consider implementing a buffering strategy that loads and buffers audio in chunks, ensuring a continuous playback experience. This can involve using JavaScript to control buffering or utilizing media streaming technologies.
• Progress indicators: Implement progress indicators or loading spinners to inform users that the audio is being buffered or loaded. This provides visual feedback and manages user expectations during the buffering process.

By optimizing audio files, considering compression techniques, and implementing effective preloading and buffering strategies, you can enhance the web delivery of audio content and provide a seamless playback experience for your users.

9. Styling and Customizing HTML5 Audio Player Display

Applying css styles to the <audio> tag and its components:.

You can apply CSS styles to the <audio> tag and its components to customize the appearance of the audio player. Here are some common CSS properties you can use:

• Width and height: Set the width and height of the <audio> tag to control its size on the web page.
• Background color and borders: Customize the background color and add borders to the <audio> tag to match the overall design of your website.
• Padding and margin: Adjust the padding and margin properties to create spacing around the audio player.
• Text and font styles: Modify the text color, font family, and font size within the audio player controls.
• Positioning and alignment: Use positioning properties like “position” and “float” to control the placement and alignment of the audio player on the web page.

Designing visually appealing audio player interfaces:

To create visually appealing audio player interfaces, consider the following design considerations:

• Consistency: Maintain consistency with the overall design language of your website. Use similar colors, typography, and styles to create a cohesive visual experience.
• Visual hierarchy: Use visual cues to highlight important elements within the audio player, such as the play button, progress bar, and volume control. Employ techniques like color contrast, size variations, and iconography to guide users’ attention.
• Minimalism and simplicity: Opt for a clean and minimalistic design approach that avoids clutter and unnecessary elements. Keep the interface simple and intuitive for easy navigation and interaction.
• Iconography and visual indicators: Utilize appropriate icons or visual indicators for play, pause, volume, and other controls to enhance usability and user understanding.
• Responsive design: Ensure that the audio player interface adapts well to different screen sizes and devices. Implement responsive design techniques, such as fluid layouts and media queries, to provide a seamless experience across desktop, tablet, and mobile devices.

Responsive audio playback and design considerations:

When it comes to responsive audio playback and design, consider the following:

• Media queries: Use CSS media queries to adjust the size, layout, and styling of the audio player based on the screen size and device. This ensures that the player is optimized for different viewport sizes.
• Flexible layout: Create a flexible layout for the audio player that can adapt to varying screen sizes. Consider using percentage-based widths or CSS grids to allow the player to resize and reposition elements smoothly.
• Touch-friendly controls: Make sure the audio player controls are touch-friendly for mobile users. Increase the size of buttons and provide ample spacing between elements to accommodate touch interactions.
• Mobile optimization: On mobile devices, consider using a full-width design for the audio player to maximize the available screen space. Additionally, optimize the player for touch gestures, such as swiping for seeking or tapping for play/pause.
• Accessibility: Ensure that the audio player is accessible to all users, including those with disabilities. Use semantic HTML, provide alternative text for images or icons, and ensure that the player can be navigated using keyboard controls.

By applying CSS styles, designing visually appealing interfaces, and considering responsive design principles, you can create an engaging and user-friendly audio player that seamlessly integrates with your website’s overall design.

10. Best Practices and Considerations

Recommendations for using audio on websites effectively:.

• Purposeful use: Use audio elements judiciously and ensure that audio content adds value to the user experience. Avoid autoplaying audio, especially with sound, as it can be intrusive and annoying for users.
• Clear controls: Provide intuitive and easy-to-understand controls for audio playback. Users should be able to play, pause, stop, and adjust volume easily.
• Mobile optimization: Optimize audio playback for mobile devices by ensuring compatibility with various screen sizes and touch interactions. Consider using larger buttons and touch-friendly controls.
• File optimization: Optimize audio files for web delivery by compressing them without compromising audio quality. Use appropriate file formats and bitrates to balance file size and audio fidelity.
• Alternative content: Provide alternative content for users who cannot or choose not to listen to audio. This could include transcripts, captions, or alternative text describing the audio content.
• Accessibility considerations: Ensure that audio content is accessible to users with disabilities. Provide closed captions, transcripts, and descriptive text for audio elements to make them inclusive.

Copyright and licensing considerations for audio content:

• Original content: Create your own audio content or obtain appropriate licenses for using copyrighted audio content. Respect the intellectual property rights of others.
• Public domain: Use audio content that is in the public domain and free from copyright restrictions. Public domain resources can be freely used without permission or payment.
• Royalty-free music: Consider using royalty-free music or sound effects that come with a license allowing their use in various projects. Ensure that you comply with the terms and conditions of the specific license.
• Creative Commons licenses: Familiarize yourself with Creative Commons licenses, which allow the use of copyrighted works under certain conditions specified by the creator. Understand the specific requirements of each license type (e.g., attribution, non-commercial use) and adhere to them.

Cross-browser compatibility and fallback strategies:

• Format compatibility: Choose audio formats that are supported across different browsers and platforms. Commonly supported formats include MP3, WAV, and Ogg Vorbis. Provide multiple format options using the <source> element to ensure compatibility.
• Browser testing: Test audio playback on different browsers and devices to ensure consistent functionality and performance. Pay attention to older browsers and ensure compatibility with popular ones such as Chrome, Firefox, Safari, and Edge.
• Fallback content: Provide fallback content for browsers that do not support the <audio> tag or specific audio formats. This could include a message or alternative content informing users about the unsupported audio.
• JavaScript-based fallbacks: Use JavaScript to detect browser capabilities and provide alternative audio playback solutions or fallbacks when necessary. JavaScript libraries like MediaElement.js and SoundManager2 can help in implementing cross-browser audio support.
• Graceful degradation: Plan for graceful degradation, where the audio player may lose some features or interactivity on unsupported browsers but still provides a basic playback experience.

By following these recommendations and considering copyright, licensing, cross-browser compatibility, and fallback strategies, you can effectively use audio on your website while ensuring legal compliance, accessibility, and a consistent user experience across different platforms and devices.

11. Conclusion:

Recap of the benefits and capabilities of the <audio> tag:.

The <audio> tag in HTML5 brings several benefits and capabilities to web development:

• Native audio support: The <audio> tag provides native support for embedding audio content directly in web pages without the need for external plugins or dependencies.
• Cross-platform compatibility: The <audio> tag is supported by major web browsers, ensuring cross-platform compatibility and a consistent audio playback experience for users.
• Multimedia integration: The <audio> tag allows for seamless integration of audio content with other web elements, such as text, images, and videos, enabling developers to create rich multimedia experiences.
• Control and customization: The <audio> tag provides built-in controls for audio playback, including play, pause, volume adjustment, and seeking. It can be customized and styled using CSS to match the design and branding of the website.
• Accessibility support: The <audio> tag can be enhanced with accessibility features, such as providing alternative text, transcripts, and captions, making audio content more inclusive and accessible to users with disabilities.

Encouragement to leverage audio in HTML5 to create engaging web experiences:

Incorporating audio into your web experiences can significantly enhance user engagement and create more immersive and interactive content. Here are some reasons to leverage audio in HTML5:

• Enhanced storytelling: Audio can be a powerful tool for storytelling, allowing you to convey emotions, set moods, and enhance the overall narrative of your content.
• Improved user experience: By adding audio elements, you can engage users on a multi-sensory level, providing a more dynamic and enjoyable experience.
• Increased engagement: Audio can capture users’ attention, encouraging them to stay longer on your website and consume your content more thoroughly.
• Branding and identity: Audio can help establish and reinforce your brand’s identity by incorporating branded sound effects, jingles, or voice-overs.
• Differentiation from competitors: By utilizing audio creatively, you can differentiate your website from competitors and leave a lasting impression on visitors.

Final thoughts on the future of audio on the web:

As technology advances and user expectations evolve, audio will continue to play a significant role in web experiences. The future of audio on the web holds exciting possibilities, including:

• Voice-activated interfaces: With the rise of voice assistants and smart speakers, audio interactions will become more prevalent. Websites may incorporate voice-activated controls and voice-guided experiences.
• Immersive audio experiences: Advancements in audio technologies, such as spatial audio and 3D sound, will enable more immersive and realistic audio experiences on the web.
• Personalized audio content: Websites may leverage user data and preferences to deliver personalized audio content, tailoring the audio experience to individual users.
• Audio-driven interactions: Audio interfaces and interactions, such as voice commands, audio feedback, and audio-driven games, will become more prevalent, providing unique and engaging user experiences.

In conclusion, leveraging the <audio> tag in HTML5 empowers web developers to create engaging and interactive audio experiences. By incorporating audio thoughtfully and considering the user experience, accessibility, and future trends, you can create websites that captivate and delight users through the power of sound.

All About HTML

May 27, 2023

Previous Elevate Your Web Design: Unveiling the Magic of Structural, Contextual and Semantic tags

Next exploring the power of the video tag in html: a comprehensive guide, related posts ....

Simple Tips to Creating and Styling Responsive Tables in HTML5

Exploring the Power of iframe tag in HTML5: A Comprehensive Guide

Mastering Forms in HTML: A Comprehensive Guide to All Form Fields

Leave a reply cancel reply.

Your email address will not be published. Required fields are marked *

Safari HTML5 Audio and Video Guide

• Table of Contents
• Jump To…
• Download Sample Code

Controlling Media with JavaScript

Because the <audio> and <video> elements are part of the HTML5 standard, there are JavaScript methods, properties, and DOM events associated with them.

There are methods for loading, playing, pausing, and jumping to a time. There are also properties you can set programmatically, such as the src URL and the height and width of a video, as well as read-only properties such as the video’s native height. Finally, there are DOM events you can listen for, such as load progress, media playing, media paused, and media done playing.

This chapter shows you how to do the following:

Use JavaScript to create a simple controller.

Change the size of a movie dynamically.

Display a progress indicator while the media is loading.

Replace one movie with another when the first finishes.

Keep the playback of multiple media elements in perfect sync.

Provide fallback content using JavaScript if none of the media sources is playable.

Enter and exit full-screen mode.

Take your custom video player and controls into full-screen mode.

For a complete description of all the methods, properties, and DOM events associated with HTML5 media, see Safari DOM Additions Reference . All the methods, properties, and DOM events associated with HTMLMediaElement , HTMLAudioElement , and HTMLVideoElement are exposed to JavaScript.

A Simple JavaScript Media Controller and Resizer

Listing 4-1 creates a simple play/pause movie control in JavaScript, with additional controls to toggle the video size between normal and doubled. It is intended to illustrate, in the simplest possible way, addressing a media element, reading and setting properties, and calling methods.

Any of the standard ways to address an HTML element in JavaScript can be used with <audio> or <video> elements. You can assign the element a name or an id, use the tag name, or use the element’s place in the DOM hierarchy. The example in Listing 4-1 uses the tag name. Since there is only one <video> element in the example, it is the 0th item in the array of elements with the “video” tag name.

Listing 4-1   Adding simple JavaScript controls

The previous example gets two read-only properties: paused and videoHeight (the native height of the video). It calls two methods: play() and pause() . And it sets one read/write property: height . Recall that setting only the height or width causes the video to scale up or down while retaining its native aspect ratio.

Using DOM Events to Monitor Load Progress

One of the common tasks for a movie controller is to display a progress indicator showing how much of the movie has loaded so far. One way to do this is to constantly poll the media element’s buffered property, to see how much of the movie has buffered, but this is a waste of time and energy. It wastes processor time and often battery charge, and it slows the loading process.

A much better approach is to create an event listener that is notified when the media element has something to report. Once the movie has begun to load, you can listen for progress events. You can read the buffered value when the browser reports progress and display it as a percentage of the movie’s duration .

Another useful DOM event is canplaythrough , a logical point to begin playing programmatically.

You can install event listeners on the media element or any of its parents, up to and including the document body.

Listing 4-2 loads a large movie from a remote server so you can see the progress changing. It installs an event listener for progress events and another for the canplaythrough event. It indicates the percentage loaded by changing the inner HTML of a paragraph element.

You can copy and paste the example into a text editor and save it as HTML to see it in action.

Listing 4-2   Installing DOM event listeners

The buffered property is a TimeRanges object, essentially an array of start and stop times, not a single value. Consider what happens if the person watching the media uses the time scrubber to jump forward to a point in the movie that hasn’t loaded yet—the movie stops loading and jumps forward to the new point in time, then starts buffering again from there. So the buffered property can contain an array of discontinuous ranges. The example simply seeks to the end of the array and reads the last value, so it actually shows the percentage into the movie duration for which there is data. To determine precisely what percentage of a movie has loaded, taking possible discontinuities into account, iterate through the array, summing the seekable ranges, as illustrated in Listing 4-3

Listing 4-3   Summing a TimeRanges object

The buffered , played , and seekable properties are all TimeRanges objects.

Replacing a Media Source Sequentially

Another common task for a website programmer is to create a playlist of audio or video—to put together a radio set or to follow an advertisement with a program, for example. To do this, you can provide a function that listens for the ended event. The ended event is triggered only when the media ends (plays to its complete duration), not if it is paused.

When your listener function is triggered, it should change the media’s src property, then call the load method to load the new media and the play method to play it, as shown in Listing 4-4 .

Listing 4-4   Replacing media sequentially

The previous example works on both Safari on the desktop and Safari on iOS, as the load() and play() methods are enabled even on cellular networks once the user has started playing the first media element.

Syncing Multiple Media Elements Together

Until the advent of media controllers, ensuring that two or more videos played at precisely the same time was a challenging endeavor. Media controllers let you group any number of audio and/or video elements so that they can be managed by a universal set of controls, and also so that they can be kept in perfect sync, even if a network hiccup occurs.

To create a media controller, simply add the mediagroup attribute to all of the elements you wish to sync together. The value you choose to assign to mediagroup is up to you—as long as the value is the same for each slaved element, a media controller will be created implicitly.

Most of the same functions, attributes, and events available to audio and video elements are also available to media controllers. Instead of calling play() or pause() directly on the video itself, you call them on the media controller.

Accessing the controller object on any of the slaved media elements will return a controller of the grouped elements. You can also create a media controller entirely in JavaScript without needing to modify the attributes of your HTML:

If one video stalls or stutters, the other videos will automatically pause to wait for the lagging video to catch up. When the video buffers and is ready to play, the remaining videos will resume in sync.

Using JavaScript to Provide Fallback Content

It’s easy to provide fallback content for browsers that don’t support the <audio> or <video> tag using HTML (see Specifying Fallback Behavior ). But if the browser understands the tag and can’t play any of the media you’ve specified, you need JavaScript to detect this and provide fallback content.

To test whether the browser can play any of the specified media, iterate through your source types using the canPlayType method.

If the method returns “no” or the empty string (“”) for all the source types, the browser knows it can’t play any of the media, and you need to supply fallback content. If the method returns “maybe” or “probably” for any of the types, it will attempt to play the media and no fallback should be needed.

The following example creates an array of types, one for each source, and iterates through them to see if the browser thinks it can play any of them. If it exhausts the array without a positive response, none of the media types are supported, and it replaces the video element using innerHTML . Listing 4-5 displays a text message as fallback content. You could fall back to a plug-in or redirect to another page instead.

Listing 4-5   Testing for playability using JavaScript

Handling Playback Failure

Even if a source type is playable, that’s no guarantee that the source file is playable—the file may be missing, corrupted, misspelled, or the type attribute supplied may be incorrect. If Safari 4.0.4 or earlier attempts to play a source and cannot, it emits an error event. However, it still continues to iterate through the playable sources, so the error event may indicate only a momentary setback, not a complete failure. It’s important to check which source has failed to play.

Changes in the HTML5 specification now require the media element to emit an error only if the last playable source fails, so this test is not necessary in Safari 5.0 or later.

The example in Listing 4-5 iterates through the source types to see if any are playable. It saves the filename of the last playable source. If there are no playable types, it triggers a fallback. If there are playable types, it installs an error event listener. The event listener checks to see if the current source contains the last playable filename before triggering a failure fallback. (The currentSrc property includes the full path, so the test is for inclusion, not equality.)

Notice that when adding a listener for the error event you need to set the capture property to true , whereas for most events you set it to false .

Listing 4-6   Testing for failure using JavaScript

Resizing Movies to Native Size

If you know the dimensions of your movie in advance, you should specify them. Specifying the dimensions is especially important for delivering the best user experience on iPad. But you may not know the dimensions when writing the webpage. For example, your source movies may not be the same size, or sequential movies may have different dimensions. If you install a listener function for the loadedmetadata event, you can resize the video player to the native movie size dynamically using JavaScript as soon as the native size is known. The loadedmetadata event fires once for each movie that loads, so a listener function is called any time you change the source. Listing 4-7 shows how.

Listing 4-7   Resizing movies programmatically

Taking Video Full Screen

Safari 5.0 and later, and iOS 3.2 and later on iPad, include a full-screen button on the video controller, allowing the user to initiate full-screen video mode.

Safari 5.0 and iOS 4.2 and later add JavaScript properties and DOM events that your scripts can use to determine when the browser has entered or exited full-screen video mode, as well as the methods to enter and exit full-screen video mode programatically. See HTMLMediaElement Class Reference for a full description of the full-screen DOM events, properties, and methods.

The following example, Listing 4-8 , adds a button that puts Safari into full-screen video mode. The Boolean property webkitSupportsFullscreen is tested to verify that the current media is capable of being played in full-screen mode. Audio-only files cannot be played in full-screen mode, for example. The Full-screen button is hidden until the test is performed.

Listing 4-8   Using webkitEnterFullscreen()

Taking Your Custom Controls Full Screen

In Safari 5.1 and later for OS X and Windows, you can not only take your video into full-screen mode, you can take any HTML element into full-screen mode. If you enclose a video and custom controls inside a div element, for example, you can take the div element and all its contents into full-screen mode by calling myDiv.webkitRequestFullscreen() .

Use the following functions to take any element into and out of full-screen mode:

myElement.webkitRequestFullscreen()

document.webkitExitFullscreen()

When you enter full-screen mode programatically, it is important to remember that the user can exit full-screen mode at any time by pressing the Esc key.

Full-Screen Event and Properties

OS X and iOS behave differently in terms of detecting which HTML elements can be brought full-screen. On iOS, you can take any video full-screen. On OS X, you can take any HTML element full-screen. Although they share the same webkitRequestFullscreen and webkitExitFullscreen methods, the two platforms have different event listeners:

OS X: the webkitfullscreenchange event fires when an element enters or exits full-screen mode.

iOS: the webkitbeginfullscreen and webkitendfullscreen events fire when a video enters and exits full-screen mode, respectively.

Listen for these events to detect changes in screen presentation. Take a look at the HTML5VideoEventFlow sample code project to get an interactive understanding of the order in which these and other video playback events happen.

The document.webkitFullscreenElement property contains the element that is in full-screen mode. Check if this property is defined to determine if the user is currently in full-screen mode. The document.fullscreenEnabled property detects whether the browser supports the full-screen API, not whether an element is currently full-screen.

Resizing Enclosed Video

When a video element alone is taken into full-screen mode, the video is automatically scaled to fill the screen. When other elements are taken full screen, however, they are not necessarily resized. Instead, normal HTML rules are followed, so a div element and its children retain their height and width. If your video is inside an element that you take full screen, you are responsible for resizing the video when Safari enters and exits full-screen mode.

An easy way to resize video automatically is to define a full-screen pseudo-class in CSS for the element enclosing the video. With this pseudo-class , you can specify a set of CSS styles that are only applied in full-screen mode. For example, if the ID of the div you are taking full-screen is “video-player” this CSS snippet expands the enclosed video when the div element is in full-screen mode:

A key advantage to using CSS is that it expands the video when its parent is in full-screen mode, then returns the video to its normal size when its parent leaves full-screen mode.

It can be tricky to expand a video to use the full screen while preserving its aspect ratio. Here are some guidelines:

If your video aspect ratio is 16 x 9, setting the width to 100% usually works best without setting the height explicitly—your video is scaled to the correct width, and the height is scaled to preserve the aspect ratio. Most displays are 4 x 3, 16 x 9, or slightly taller, so there is normally enough display height to prevent clipping.

If your video aspect ratio is 4 x 3, setting the width to 75% gives the maximum image size for screens with 16 x 9 aspect ratios, while still using most of a 4 x 3 display. (Setting the width to 100% clips off the top and bottom of the image on widescreen displays.) Alternatively, you can use JavaScript to read the screen height and width, then set the width to 100% on 4 x 3 displays and 75% on wider displays.

If your video is taller than it is wide, setting the height to 100% and leaving the width unset gives you the maximum image size on any landscape display.

If your controls appear under the video, instead of floating on top of the video, reduce the width or height setting by 10% or so to leave room for the controls.

Full-screen Video with Custom Controls Example

The example in Listing 4-9 creates a div element enclosing a video and a simple Play/Pause control. Beneath the div element is a full-screen control. When the full-screen control is clicked, the example takes the div element enclosing the video and Play/Pause control into full-screen mode.

CSS styles are used to expand the div element itself to 100% of the screen width and height, and to expand the enclosed video element to 100% of the div element’s width. Only the video’s width is specified, so that the video scales up while retaining its native aspect ratio. The example also gives the div element a black background when in full-screen mode.

More elaborate CSS could be used to hide the controls while in full-screen mode and reveal them when the user touches or hovers over the video. For more about styling video controllers using CSS, see Adding CSS Styles .

Listing 4-9   Full-screen video with custom controls

Copyright © 2012 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2012-12-13

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

HTML5 radio player for Safari for iOS and macOS

romaindillet/that-radio-player

Folders and files, repository files navigation, that radio player.

That Radio Player is an HTML5 webapp that uses the <audio> tag to stream (web) radios on a mobile phone. It has been originally developed for Safari on iOS 4.3 but I updated it for iOS 13.3.1. It is optimized for a mobile phone screen but also works well on an iPad or on macOS using Safari. I haven't tested other web browsers.

Try That Radio Player on your iOS device: https://romaindillet.github.io/that-radio-player/

This webapp is written in HTML, CSS and JavaScript. No code is executed server-side.

If you want to run your own version, you should first edit the radio presets to replace .m3u8 , .m3u , etc. links with direct links to the streaming servers of your favorite radio stations.

• HTML 100.0%

You are using an outdated browser. Please upgrade your browser to improve your experience.

macOS Safari compatibility added to Amazon Prime Video HTML5 streaming, with limitations

Before the implementation of the change over the weekend, Amazon Prime Video required installation of the problematic Microsoft Silverlight plugin for playback of streaming video in Safari. The implementation is still not perfect, with video playback capped at 720p resolution.

Based on AppleInsider testing, the current versions of Chrome and Firefox still have better AirPlay Mirroring options, as well as not having the artificial 720p resolution cap.

In April , Amazon made the Prime Video subscription available to those not choosing an Amazon Prime subscription. The Prime Video plan is available for $8.99 per month. This includes all shows and movies, as well as HD, UHD (4K), and HDR video quality options.

A full Amazon Prime subscription is cheaper, at $99.99 billed annually .

Yay!  My two favorite companies, Apple and Amazon.  Nice to see some 'getting along' even if no app for Apple TV.

I can't say I've ever had an issue with Safari on Mac without the Silverlight plugin for Amazon owned/created content. What am I missing?

Soli said: I can't say I've ever had an issue with Safari on Mac without the Silverlight plugin for Amazon owned/created content. What am I missing? Not sure. It's always required it. You may have the plug-in from the dawn of time, it's pretty pernicious.

Mike Wuerthele said: Soli said: I can't say I've ever had an issue with Safari on Mac without the Silverlight plugin for Amazon owned/created content. What am I missing?

Great ! Now if only Fidelity will do it for Active Trader Pro.

Top Stories

Amazon discounts the Apple Studio Display to $1,299.97 ($300 off)

New iPad Pro unexpectedly rumored to debut with M4 chip

Retro gold rush: these emulators are coming to the App Store soon

The Worst of WWDC - Apple's biggest missteps on the way to success

Apple said to have restarted discussion for OpenAI integration into iOS 18

New iPad Air & iPad Pro models are coming soon - what to expect

Featured deals.

Save up to $350 on every Apple M3 MacBook Pro, plus get up to $80 off AppleCare

Latest news.

Crime blotter: NYPD officer acquitted for 2021 punch in Apple Store

In this week's look at the Apple crime blotter, Canadian Police are looking into iPhone thefts, fraud has been alleged in third-party Apple Store pick-ups, an iPhone was stolen in a viral video, and more!

New iPhone 16 leak blows the cover off of screen sizes & camera bump

Frequent leaker Sonny Dickson has revealed a photo purporting to show the forthcoming iPhone 16 lineup, and the screen sizes for each of the four models.

Amazon discounts the Apple Studio Display to $1,299 ($300 off)

Save $300 on the Apple Studio Display at Amazon this weekend, with prices dropping to as low as $1,299.97 (the lowest price on record).

Apple Pencil coming on May 7 could buzz users with haptic feedback

The next generation of Apple Pencil could have haptic feedback, buzzing a user's fingers as they draw and write.

New iPad Pro rumored to debut with M4 chip

A new rumor claims that the forthcoming iPad Pro, scheduled to debut on May 7, could be the first Apple product with the next-generation M4 chip powering it.

Some users are randomly getting locked out of their Apple ID accounts

Overnight, a notable portion of iCloud users were getting logged out of their accounts across all of their devices, and the only way back in was to perform a password reset.

A report suggests that Apple is still looking across the spectrum of AI providers for iOS 18, with OpenAi again in conversations with the iPhone maker.

Apple is allowing emulators to be submitted to the App Store. Here's what's on the way so you can play your favorite retro games on your iPhone.

Apple has a new Swift tutorials webpage for budding developers

Apple has launched a new tutorial webpage featuring beginner resources for programming using Swift, Swift UI, and Xcode.

macOS Sonoma update fixes USB hubs, Java crashes, and more

Following iOS and iPadOS updates late last week, Apple has released a complementary update to macOS Sonoma with security updates and some big bug fixes.

How to use Apple's Time Capsule for backups on a modern wireless network

Time Capsule was Apple's discontinued line of network backup products. This is how you could use one on a modern network.

Latest Videos

All of the specs of the iPhone SE 4 may have just been leaked

When to expect every Mac to get the AI-based M4 processor

Latest reviews.

Unistellar Odyssey Pro review: Unlock pro-level astronomy with your iPhone from your backyard

Ugreen DXP8800 Plus network attached storage review: Good hardware, beta software

Espresso 17 Pro review: Magnetic & modular portable Mac monitor

{{ title }}

{{ summary }}

ClickToPlugin & ClickToFlash Safari extensions

ClickToPlugin is a lightweight and highly customizable extension that prevents Safari from launching plug-ins automatically, resulting in faster browsing, reduced fan usage, and increased battery life. It replaces every plug-in object by an unobtrusive placeholder that can be clicked to load the embedded content. Further, it can replace many plug-in-based media players by Safari’s native HTML5 media player. ClickToFlash is a restriction of ClickToPlugin that only deals with Flash content.

ClickToPlugin is currently localized in English, French, German, Spanish, Catalan, Italian, Brazilian Portuguese, Polish, Turkish, Japanese, Simplified Chinese, and Traditional Chinese.

Requirements

• Safari 5.1 or higher on OS X 10.6–10.11
• Safari 5.0.6 or higher on OS X 10.5

Acknowledgements

This extension owes its existence and awesomeness to many. I would like to thank

• Jonathan Rentzsch, the inventor of the original ClickToFlash plug-in ;
• Matt Ball, the developer of a previous ClickToFlash extension which served as this extension’s starting point (in particular, he designed the ingenious CSS of the placeholders);
• Ast A. Moore , who designed the extension’s icon and with whom I had many useful conversations;
• Robert Lange, who designed the source selector ;
• Félix Cloutier, developer of the Plugin Customs extension, from whom I learned how to detect Java applets;
• Rodger Combs, developer of the Plugin Blocker extension, from which I learned about XHRs and how to use them to fetch the URLs of videos on Vimeo and Veoh;
• Eric Dubiel, Josh Rafofsky, and Andreas Treichel who made the AirPlay feature possible;
• Paul Grave, who created the BBC and MTVNetworks killers;
• finally, everyone who emailed me with bug reports, bug fixes, and feature requests!

Further, thanks should be given to

• aONe for the Spanish localization;
• Eric Woo for the Traditional Chinese, Simplified Chinese, and Japanese localizations;
• Andreas Treichel for the German localization;
• Taylan Tunç for the Turkish localization;
• Vincenzo Boiano for the Italian localization;
• Arkadiusz Fal for the Polish localization;
• Pau Sellés i Garcia for the Catalan localization;
• BR Lingo for the Brazilian Portuguese localization.

Overview of features

Blocking plug-ins.

ClickToPlugin prevents Safari from launching plug-ins and replaces every plug-in object by a placeholder labeled by the name of the blocked plug-in (fig. 1). Clicking this placeholder loads the original plug-in object. Which plug-ins are blocked can be specified in the preferences . In addition, ClickToPlugin features several control lists to specify objects that should never be blocked or that should be hidden from view instantly. Check the Settings section for complete details on customizing ClickToPlugin.

ClickToPlugin does not block <applet> elements. These elements are used to embed Java applets into web pages and launch a Java plug-in. The reason is that they cannot be blocked.

Replacing plug-ins by HTML5

ClickToPlugin has extensible plug-in-to-HTML5 capabilities. When ClickToPlugin can replace a plug-in objects by an HTML media element, the label of the placeholder is changed accordingly (fig. 2), and a preview image of the media is shown when available. Clicking such a placeholder loads Safari’s native media player (fig. 3).

The original plug-in object can still be loaded by right-clicking the placeholder and choosing “Load Plug-in”, by right-clicking the media player and choosing “Restore Plug-in”, or by using the source selector .

With the default configuration, ClickToPlugin can create HTML5 versions of most plug-in-based players (both on-site and embedded) from the following websites: BBC, Blip.tv, Break, Dailymotion, Facebook, IGN, Metacafe, TED, and YouTube. It can also find audio/video replacements to several generic Flash and Silverlight players, and use existing <audio> / <video> fallback content. Finally, it can replace QuickTime, Windows Media, and DivX plug-in objects by HTML media elements.

Additional functions of the media player

ClickToPlugin’s media player provides additional functions through the shortcut menu or the source selector . It can

• download a media resource;
• open a media resource in the QuickTime Player application (requires version ≤ 7.7.1 of the QuickTime web plug-in);
• ask a specified AirPlay device to play a media resource (requires a compatible AirPlay device, see below);
• open in a new tab the web page associated with the current track by the replacement script, if any.

The following devices or applications provide AirPlay servers that are known to be compatible with the extension:

• Apple TV (with software version 4.3 or later);
• AirServer ;
• XBMC (listens on port 36667 by default);
• AirPlay/DLNA Receiver .

Note that there is no streaming involved when ClickToPlugin requests an AirPlay device to play a video: only the video URL is transmitted.

Source selection

A list of all available media sources (for example differing in quality) appears when hovering in the top left corner of a media placeholder (fig. 4 left) or the media player (fig. 4 center). On a media placeholder, clicking a source loads that source in the HTML5 media player. In the media player, clicking a source loads that source and jumps to the current playback time if the media is seekable. When right-clicking a source, the “Download Video”, “Open in QuickTime Player”, and “Send via AirPlay” commands apply to that particular source.

When sources are available to play with the HTML5 player but the settings prevent any of them from being used by default, an asterisk appears on the placeholder’s badge to indicate that alternative media sources are available (fig. 4 right).

ClickToPlugin can load whole playlists into the media player. With the default configuration, it will do so for various types of YouTube playlists and some generic Flash players. When a playlist is used, a track selector is accessible through a keyboard shortcut . The track selector is a normal HTML <select> element and behaves as such.

ClickToPlugin uses a custom interface for its preferences. It can be accessed in three ways: from the Extension tab in Safari’s preferences, using an optional shortcut menu item , or using a customizable keyboard shortcut . The preference window overlays the current page, except if the top document is an HTML4 frameset document, in which case it opens in a new tab instead.

When the preference window is standing on top of a web page, you can dismiss it by clicking outside it (this click does not affect the underlying web page), by using the same keyboard shortcut that opens the preference window, or by pressing ⌘W (Command-W).

In this tab you can specify which plug-ins are not blocked by ClickToPlugin.

Control lists

A line in a control list matches a URL if either

• it does not start with @ and is a substring of the given URL, or
• it starts with @ and the rest of the line is a valid Javascript regular expression that matches the given URL.

The first two control lists are the whitelists and the latter two the blacklists . A pair of lists matches a given plug-in object if either

• some line in the first list matches the absolute URL of the given object’s document, or
• some line in the second list matches the absolute URL of the resource to be loaded by the the given object.

When an instance of a plug-in that is not selected under the “Plug-ins” tab is about to be loaded in a document, ClickToPlugin blocks it unless either

• the first “Invert lists” box is unchecked and the whitelists match the given object, or
• the first “Invert lists” box is checked and the whitelists do not match the given object.

If a plug-in object is blocked, then ClickToPlugin further removes it from the document if either

• the second “Invert lists” box is unchecked and the blacklists match the given object, or
• the second “Invert lists” box is checked and the blacklists do not match the given object.

Media player

The next two settings control ClickToPlugin’s choice of default source to be used when the placeholder is clicked. Other sources can only be loaded from the source selector .

Shortcut menu

In this tab you can choose which commands can appear in the shortcut menu (or contextual menu). Even if selected, a command does not appear in the shortcut menu if it cannot be used at that time. Moreover, when right-clicking a placeholder, only the commands that apply specifically to the targeted element appear.

The following four shortcut menu items can appear on media placeholders or media players.

Keyboard shortcuts

To set a keyboard shortcut, click in the text field and type the desired shortcut. The four modifier keys ⇧ (Shift), ⌃ (Control), ⌥ (Option), and ⌘ (Command) can be used. To set a mouse shortcut, hover the mouse pointer over the square to the right of the text field, and perform the desired mouse action. The left button, middle button, and mouse wheel can be used, possibly with modifier keys.

Clearing a shortcut prevents ClickToPlugin from registering a listener to this shortcut.

Some shortcuts will not work while watching a video in fullscreen mode. If applicable, the “Enter fullscreen” shortcut can be used to exit fullscreen. The ⎋ (Escape) key can also be used to exit fullscreen.

Hidden settings

Hidden settings can be set via the defaults command. They are all of type string .

• language : a language code in quotation marks, for instance "en-us" . If unspecified, ClickToPlugin uses the browser’s language. Default: none.
• maxInvisibleSize : the maximal height and width, in pixels, of plug-in objects that are considered invisible. Default: 8 .
• seekTime : the time increment, in seconds, of the jumps produced by the seek backward/seek forward keyboard shortcuts. Default: 10 .

For example, to change seekTime to 5 , run

Beware that older versions of Safari store extension settings in the domain com.apple.Safari instead of com.apple.Safari.Extensions .

Release Notes

Version 3.2 is the final version of ClickToPlugin.

• Fixed YouTube killer (fixes #158 )
• Fixed YouTube killer (fixes #152 )
• Updated MTVNetworks and YouTube killers
• Updated media player design for Safari 9 (thanks roblan!)
• Updated BBC, MTVNetworks, TED, and YouTube killers (fixes #140 and #141 )
• Removed obsolete Blip and Metacafe killers
• Updated Dailymotion and MTVNetworks killers (fixes #130 and #131 )
• Fixed a typo in the YouTube killer
• The bug mentioned in 3.1.3 was not completely fixed
• Fixed a bug that prevented video playback on Google Photos (thanks Josh Rafofsky!)
• Updated YouTube killer (fixes #116 and #117 ; thanks Kenneth!)
• Updated YouTube killer
• Seek backward/seek forward keyboard shortcuts can be set in the preferences (thanks HermiG!)
• New NYTimes killer for videos on www.nytimes.com
• Removed obsolete IGN killer
• Brazilian Portuguese localization by BR Lingo
• Fixed two issues affecting the CSS positioning and sizing of some placeholders
• The MTVNetworks killer supports more websites and works in all Safari versions (fixes #86 )
• The YouTube killer could produce invalid URLs for videos with long titles (fixes #94 )
• Improved the Brightcove killer on www.nytimes.com
• Updated YouTube killer for Safari 8 (remove it from the list to use YouTube’s HTML5 player)
• Fixed BBC killer
• The HLS streams provided by the MTVNetworks killer now include 720p sources
• Removed a directive in the YouTube killer that caused problems on OS X 10.10
• Fixed MTVNetworks killer (it now uses HLS streams since the complete video files were removed)
• Fixed parsing of YouTube playlists with more than 100 videos
• Fixed media player CSS for Safari 7.1/8 and the WebKit nightlies
• Fixed an issue that prevented ClickToPlugin from opening QuickTime Player on older versions of OS X
• Catalan localization by Pau Sellés i Garcia
• Fixed a bug which prevented some plug-ins from being whitelisted
• Updated MTVNetworks killer
• Fixed an issue which sometimes caused the placeholders to have incorrect dimensions
• Updates to the BBC, MTVNetworks, TED, and YouTube killers
• Removed obsolete Break killer
• Updates to the MTVNetworks, TED, and YouTube killers
• Minor updates to the BBC, MTVNetworks, and YouTube killers
• The “Autoplay on these sites” list now matches the tab’s URL rather than the document’s URL (this allows the list to apply to YouTube videos embedded on a given site, for example)
• Changing the track in a playlist using the track selector or a keyboard shortcut does not force autoplay (with “Initial behavior” set to “Do not preload” or “Preload”, this allows selecting tracks for AirPlay without downloading or playing them in Safari)
• Updated the YouTube killer with support for 480p FLV, 1080p MP4, and 1440p MP4 videos
• Updated the generic Flash killer with support for videos from screencast.com (thanks Smokey Ardisson!)
• Updated YouTube killer (fixes #41 )
• Removed Vimeo killer, since Vimeo has now completely switched to HTML5
• “Send via AirPlay” remembers the current playback position in Safari (thanks Rafal Nowosielski!)
• Fixed an incompatibility between the “Disable/Enable ClickToPlugin” commands and the YouTube killer
• Updated Break killer
• Improved Facebook and Flash killers
• Minor fixes to the Flash and YouTube killers
• Fixed a bug that broke the extension in recent versions of WebKit (thanks Jason!)
• Fixed Break killer
• Polish localization by Arkadiusz Fal
• It prevents YouTube from removing the Flash player, allowing ClickToPlugin’s HTML5 replacements to be used without the Flash plug-in (this was previously accomplished by the YouTube Flash Proxy extension)
• It disables YouTube’s experimental Ajax-based loading mechanism for /watch pages (which is mostly useless if the Flash player is not used) (thanks Maxime Michel!)
• The YouTube killer now supports live M3U8 streams
• Fixed a bug affecting Safari 5.0.6 that could result in an infinite loop on some pages (thanks Dan!)
• The media player now shows the status display (e.g. the “Loading…” text) provided by Safari, rather than a custom one
• Internal WebKit plug-ins are not listed in the “Plug-ins” tab anymore (they are not really plug-ins and cannot be blocked anyway)
• Fixed Dailymotion killer
• Updated Dailymotion and YouTube killers
• “Send via AirPlay” should now work with AirServer on both OS X and iOS (thanks Andrew Simmonds!)
• Updated CSS for Safari 6.1/7 and the WebKit nightlies
• Updated killers
• Fixed Break, Dailymotion, and Facebook killers (thanks Josh Rafofsky!)
• Swapped obsolete Tumblr killer with an IGN killer
• Updated MTVNetworks and YouTube killers (thanks Stephen DeWidt!)
• Updated killers: Dailymotion, Facebook, MTVNetworks, Silverlight, Tumblr, and YouTube (thanks Florian Ubr!)
• ClickToPlugin now works normally in iframes with a javascript: source (this fixes a bug introduced in 2.7.3)
• Adapted Dailymotion killer to recent site changes
• Killer fixes and improvements for Blip, Brightcove, Facebook, Flash, TED, and YouTube (thanks Eugene Lee and Arman Vartan!)
• Fixed: the keyboard shortcuts to load or hide all plug-ins now work even if the top frame contains no plug-ins
• To work around a rare Safari bug, ClickToPlugin now blocks all resources in frames where safari is undefined (thanks Mark Irwin and Brian Mastenbrook!)
• Fixed a bug where the track selector would select incorrect tracks while the playlist was still loading
• YouTube killer: removed useless 360p FLV format
• Updated all killers
• Dailymotion: fixed replacement of embedded videos
• Flash: replaces more Flash objects
• YouTube: fixed broken video URLs caused by an ongoing YouTube update (thanks Matthew Rosen!)
• Includes new killer for HTML5-enabled Brightcove videos
• The Vimeo killer is back (thanks Andrew Simmonds!)
• Various fixes to the MTVNetworks killer (provides HTML5 videos on colbertnation.com, comedycentral.com, gametrailers.com, mtv.com, southparkstudios.com, and thedailyshow.com)
• Italian localization by Vincenzo Boiano
• The AirPlay feature is now compatible with XBMC
• Fixed CSS bug affecting the media player volume slider in playlists
• It is now possible to set both a keyboard and a mouse shortcut for the same task
• The default AirPlay port can be overridden in the AirPlay device hostname
• Fixed TED killer
• Removed Vimeo killer since it does not work with the redesigned Vimeo
• Fixed Disable/Enable mechanism in Safari 6
• Fixed media player button layout in Safari 6
• The AirPlay feature now works with the current Apple TV software (thanks Andreas Treichel!)
• MTVNetworks killer: fix for HTML5 replacements on thedailyshow.com (thanks Paul Grave!)
• Minor fixes to the YouTube killer
• New killer for videos from collegehumor.com
• Removed broken IGN killer
• Fixed the “Open in QuickTime Player” function in WebKit (thanks Giorgio Calderolla!)
• Facebook killer: fix HTML5 replacement of embedded Facebook videos
• Fixes display of video titles in WebKit
• Includes Turkish localization by Taylan Tunç
• Includes new killers for Flash videos from ign.com, 1up.com, bbc.co.uk, mtv.com, colbertnation.com, thedailyshow.com, gametrailers.com, southparkstudios.com, and comedycentral.com (thanks Paul Grave!)
• YouTube killer: fixed a typo that prevented videos from loading in rare cases
• Improved support for seek-to links on YouTube
• Added checkbox to open the settings from Safari’s preferences
• Fixed CSS for the WebKit nightly builds (thanks Mark Rowe!)
• Support for seek-to links and URLs on YouTube (thanks Alexey Ermakov!)
• Fixed saving of checkbox states in the WebKit nightly builds (thanks Rickey Chang!)
• Fixed a bug where ClickToPlugin did not detect that a QuickTime object would launch QuickTime Player (thanks Jussi Hagman!)
• Fixed Blip.tv killer (thanks gkaindl!)
• Minor update to the YouTube killer
• Videos in ClickToPlugin’s media player can be viewed instantly on a specified Apple TV
• New “Send via AirPlay” shortcut menu item
• New “AirPlay” item in the source selector
• Added an option to automatically load plug-ins that killers cannot handle
• Fixed a bug that made a video start playing on canplaythrough even if it was previously paused by the user
• Updates the list of killers in the preferences
• Killers are guaranteed to be added in the specified order (this allows remote killers to take precedence over local killers if necessary)
• Fixed a minor track ordering bug in the track selector
• YouTube killer: support for SP playlists
• The extension’s core was rewritten from scratch based on the new plug-in handling mechanism in Safari 5.1
• Improved code structure and readability
• Merged event listeners and removed unnecessary closures
• The extension now runs in strict mode
• The track title in the media player is now also a track selector
• The media player has a new “Instant autoplay” setting for fast connections
• The “View on …” functionality for embedded videos is now also available in the source selector
• YouTube killer: support for UL (user) and AV (artist) playlists
• Break killer: support for the new on-site Flash player
• Removed the QuickTime, Windows Media, and DivX killers in favor of a single killer that can replace any HTML5-playable embedded media
• The “Loading…” text in the media player is correctly localized
• German localization by Andreas Treichel
• YouTube killer: fixed a typo introduced in 2.4 that prevented videos from loading when contained in certain types of playlists (thanks Ast A. Moore!)
• Includes updated killers from 2.4.1
• It is now possible to add killers to the extension (some new killers are available in the killers database )
• Improved killers
• Cosmetic improvements to the preference window
• Includes updated killers from 2.4
• Fixed YouTube HTML5 replacements
• Spanish localization by aONe
• Traditional Chinese, Simplified Chinese, and Japanese localizations by Eric Woo
• The commands to add a domain to a control list are now hidden if the current page is already matched
• Fixed: the keyboard shortcut to bring up the preferences would not work in some iframes
• Fixed titles of Blip.tv videos
• Minor cosmetic improvements to the preference window
• Fixed: <object> tags with a classid attribute are not blocked anymore since Safari ignores them
• New option to download videos using a download manager
• HTML5 replacements for TED videos
• HTML5 playlists now use native controls
• Fixed fullscreen video controls in Safari 5.1
• Fixes for YouTube, Dailymotion, and Blip.tv killers
• Fixes for YouTube, Dailymotion, Facebook, Blip.tv, and Megavideo killers
• Removed Veoh killer since Perian 1.2.2 dropped support for the required video format
• Keyboard shortcut for whitelisting
• Replaces more Facebook videos
• Fixed: whitelisted plug-ins could change from session to session (thanks Valerio Garzo!)
• Worked around a bug in the WebKit nightly builds that made the whitelists uneditable (thanks Manuel Schülke!)
• Updating from < 2.2 to 2.2.3 with nonempty whitelists would make the preference window inaccessible
• Support for embedded Facebook videos
• Adapted Blip.tv HTML5 replacements to site changes
• The hidden setting for the “ClickToPlugin Preferences” shortcut menu item can now be set in the preference window
• Restored the “Initial behavior” setting for the HTML5 media player
• The preference window works on HTML4 frameset documents by opening in a new tab
• The preference window is scrollable if it overflows the enclosing window
• Some parts of the extension would not work as expected on documents with MIME type application/xhtml+xml
• The preference window would become inaccessible when previously whitelisted plug-ins were uninstalled
• MIDI audio files, not playable in QuickTime X, are not considered for HTML5 replacements anymore (thanks Ed Floden!)
• Fixed an issue that could cause the release notes to pop up on every launch (thanks Matt Neuburg!)
• Fix for Facebook’s ever changing video player URL
• The extension’s preferences are now on their own HTML page accessible through the shortcut menu
• Simplified plug-in whitelisting system
• Perfected plug-in detection system: takes into account the data: URI protocol and uses MIME type sniffing as a last resort, following WebKit’s internal mechanism
• New blacklists to permanently hide plug-ins
• Customizable keyboard and mouse shortcuts for media playback and other actions
• HTML5 replacements for Facebook videos
• Revamped playlist controls
• Safari’s incomplete volume slider for HTML5 media elements can be used (you can see the finalized slider in the WebKit nightlies)
• The title of the video can be shown in the controls
• The HTML structure of the placeholder elements has been simplified using CSS3 flex boxes
• Complete CSS overhaul
• All localizations will now be bundled within the same extension
• Fixed HTML5 video aspect ratio issues using shadow DOM styling
• Fixed Megavideo and Veoh HTML5 replacements
• The “Show text only” sIFR setting could cause web pages to display incorrectly
• Fixed loading of embedded YouTube videos
• Support for YouTube’s /e/ embeds
• Revamped killer for generic Flash players
• Can download a video by Option-clicking in the source selector
• Fixed incorrect CSS that caused the labels to render incorrectly in recent versions of WebKit (thanks Jon Shier!)
• Fixed Vimeo replacements
• Support for Vimeo’s 1080p
• New keyboard shortcut ⌃⌘A to load all Flash in the frontmost window
• Much improved CSS for the source selector (thanks Roberto!)
• The “Show preview image” setting is now hidden
• Revamped whitelisting system for plug-ins
• When several video sources are available, it is now possible to switch between them
• Various killer fixes
• Revamped settings
• New shortcut menu item to temporarily disable ClickToPlugin
• Broadcast Interactive Media and Megavideo killers
• Fixed: Flash videos on collegehumor.com could be incorrectly replaced by Vimeo videos (thanks Josh Rafofsky!)
• Fixed: YouTube’s iframe embeds were not replaced anymore (thanks Michael Wren!)
• New killers: Blip.tv, Break, Metacafe, Tumblr, and more!
• Worked around a bug in Safari 5.0.3 that broke video replacements when Flash was not installed
• Fixed a placeholder layout issue affecting notably Google Street View (thanks Joe Strzemp!)
• Fixed a typo affecting replacement of some embedded Vimeo videos
• Some previously unreplaced Vimeo videos are now available in HTML5
• All event listeners are registered using the addEventListener method, to avoid conflicts with other scripts (thanks Josh Rafofsky!)
• Fixed a typo that caused videos to download needlessly in the background when there were several Vimeo videos on a page (thanks Pedro!)
• Fixed a bug introduced in 1.5.2 that could cause whitelisted elements to be blocked
• Added “Load Invisible Flash” shortcut menu item
• Fixed a bug that could cause video elements to have size 0×0
• Better plug-in detection based on WebKit’s internal mechanism
• Fixed a bug that could cause the “Load All Flash” function to remove blocked elements
• Fixed incorrect rendering of placeholder elements of size ≤ 1px that could break pixel-perfect layouts
• Video replacement support for the SWFObject Flash player
• Video files downloaded from YouTube are named by the title of the video
• Removed download links in favor of an optional shortcut menu item (enabled by default)
• Bumped version number because it was getting out of control!
• Fixed loading of long playlists with missing tracks
• Clicking a download link downloads the video directly
• Displays the blocked element’s source as a tooltip when hovering a placeholder
• Placeholders inherit CSS box model and positioning properties of the blocked element to preserve page layout
• Fixed progressive loading of playlists
• Does not block <applet> elements anymore
• Eradicated all listeners to mutation events from the extension
• Fixed broken CSS introduced in 1.4.6
• Whitelists now use spaces as separators (they are automatically updated)
• More successful video replacements for generic Flash players
• Does not replace streaming YouTube videos by nonfunctional video elements anymore
• Improved performance and correctness of whitelist parsing
• Fixed Flash not being loadable on some websites that use placeholders for their Flash objects and listen to click events from parent elements
• Fixed a bug introduced in 1.4.4 that could create several placeholder elements for the same blocked element
• Fixed Flash elements not showing up or not behaving properly when restored, in particular in those instances where the original ClickToFlash plugin works but this extension did not
• CSS has been completely rewritten to be more effective
• Worked around a bug in Safari that changed the aspect ratio of the video element when using full-page zoom (thanks Adrian Luff!)
• Fixed: some embedded Vimeo videos were not being replaced
• Fixed a typo affecting source blacklisting (thanks Marc Saurfelt!)
• Improved CSS to better override author stylesheets
• Fixed: CSS of download links was broken in 1.4.1
• Fixed handling of QuickTime objects calling QuickTime Player (regression introduced in 1.4)
• Improved plug-in detection
• Preview images on video placeholders
• Direct link to the video at the bottom of video placeholders
• The setting to load the video player automatically is now a whitelist
• Lighter placeholders
• Improved CSS of video elements (controls stay at the bottom)
• Adding a location or source to the whitelist loads the targeted content at once
• Support for YouTube’s future on-site player
• Support for Vimeo’s new universal player
• Higher-quality poster images for Dailymotion videos
• Fixed Vimeo’s SD video URLs: they now correctly points to the 360p version in all cases
• Fixed relative URL resolution
• Fixed a vulnerability that would allow invalid HTML to bypass ClickToPlugin’s blocking
• To download a video directly, move the mouse cursor up from the play/pause button to reveal a link
• Added a slider to control the opacity of the placeholder elements
• Most shortcut menu items are now optional
• Added “View in QuickTime Player” shortcut menu item
• Tweaked the CSS so that inline objects remain inline (thanks Roberto!)
• The “Load All Flash” shortcut menu item is hidden if there is no blocked Flash on the page
• “View on YouTube” works for playlists
• Fixed a few unfortunate typos affecting playlist controls
• Fixed: volume setting became ineffective in 1.3
• Added a shortcut menu item to view an embedded video from YouTube, Vimeo, Dailymotion, or Veoh on the main website
• Fixed more: some embedded YouTube videos were not being replaced
• Playlist support for YouTube and the JW Player
• Added a shortcut menu item to download the video file
• Fixed: some embedded YouTube videos were not being replaced
• Improved handling of QuickTime objects
• Safari’s native MIME types are not blocked anymore
• Can now replace Silverlight, QuickTime, and Windows Media content by HTML5 videos
• Fixed invisible elements whitelisting
• Code optimization made possible by the disappearance of a bug in Safari 5.0.1
• Fixed a stupid typo in the code
• Added support for Veoh videos (requires Perian)
• Added a setting to use nonnative codecs only as a last resort
• Worked around the fact that Safari would load fallback content upon restoring an object if fallback content was being used when it was removed
• Fixed potential compatibility issues by trying not to block objects created by other extensions
• Initial release
• Extension icon by Ast A. Moore