使用HTML5在Safari中嵌入音频和视频指南

需积分: 10 121 浏览量更新于2024-07-24 收藏 3.56MB PDF 举报

"Safari HTML5 Audio and Video Guide" 在网页设计和开发中，利用HTML5引入音频和视频已经成为标准实践。本指南针对Safari浏览器，提供了关于如何有效地使用HTML5的`<audio>`和`<video>`标签进行媒体集成的详细指导。Safari作为Apple设备上的主流浏览器，支持HTML5多媒体元素，使得开发者可以无需依赖Flash等第三方插件就能提供丰富的媒体体验。一、HTML5 Audio和Video标签 HTML5的`<audio>`和`<video>`标签是核心的多媒体元素，允许网页直接嵌入音频和视频内容。这两个标签的使用方法相似，都通过`src`属性指定媒体源，并可以通过`controls`属性添加播放、暂停、音量控制等基本操作界面。 ```html <audio controls> <source src="audio.mp3" type="audio/mpeg">  <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> ``` 二、Media Source Extensions (MSE) Safari 支持 Media Source Extensions (MSE)，这是一项允许开发者动态地流式传输和控制媒体数据的技术。通过MSE，可以实现自适应流媒体，根据网络条件自动切换不同质量的视频源，提升用户体验。三、Video编码格式 Safari 支持H.264编码的MP4视频，这是一种广泛使用的高效视频编码格式。同时，也支持WebM（VP9）和AV1等现代编码格式，但可能需要依赖硬件加速。四、Audio编码格式对于音频，Safari 支持AAC、MP3以及最近的Opus和WebM (Vorbis)编码格式。确保音频文件在多种设备和浏览器上都能播放，建议提供多种编码格式。五、事件和API HTML5的音频和视频元素提供了一系列事件和JavaScript API，如`play()`, `pause()`, `currentTime`, `duration`等，使开发者能精确控制媒体播放并实现交互功能。例如，可以监听`ended`事件来自动播放下一首歌曲。六、无障碍访问为了确保所有用户，包括视觉或听觉障碍的用户，都能访问媒体内容，HTML5音频和视频标签支持`aria-labelledby`和`aria-describedby`属性，用于提供辅助信息。七、响应式设计在设计媒体元素时，考虑响应式布局非常重要。可以使用CSS的`object-fit`属性来调整视频在不同屏幕尺寸下的显示比例，确保其在各种设备上都能正确显示。总结，Safari HTML5 Audio and Video Guide 提供了关于如何在Safari中使用HTML5音频和视频元素的全面指导，涵盖了从基础用法到高级特性的方方面面，旨在帮助开发者创建兼容性好、交互性强且用户体验优秀的多媒体网页。

Provide Alternate Sources

Not all browsers can play all media sources. Some browsers are able to play MPEG-4 or MP3 files, while others

play only files compressed using codecs such as Ogg Vorbis. Desktop computers can typically play media

using a wider assortment of compressors than mobile devices. Safari supports streaming delivery using HTTP

Live Streaming, while some other browsers support only HTTP download. To provide the best experience

for everyone, you can provide multiple versions of your media. List the sources in order of preference using

separate <source> tags. The browser iterates through the list and plays the first source that it can.

</audio>

You don’t have to rely on the file extension and delivery scheme to tell Safari about the media file. The

<source> tag accepts attributes for MIME type and codecs as well. For details, see “Providing Multiple

Sources” (page 16).

Fall Back in Good Order

Browsers that don’t support HTML5 ignore the <audio> and <video> tags, and HTML5-savvy browsers

ignore anything between the opening and closing tags except <source> tags, so it’s easy to specify fallback

behavior for older browsers. Just put the fallback HTML between the opening and closing <audio> or

<video> tags (after any <source> tags).

<p>Your browser does not support HTML5 video.</p>

</video>

Your fallback can be an <object> tag for a browser that needs a plug-in to play your media, a redirect to

another page, or a simple error message telling the user what the problem is.

For more information, including examples of how to use a plug-in as a fallback, see “Specifying Fallback

Behavior” (page 18).

Take Control Using JavaScript

Relevant Chapter: “Controlling Media with JavaScript” (page 25)

HTML5 media elements expose methods, properties, and events to JavaScript. There are methods for playing,

pausing, and changing the media source URL dynamically, for example. There are properties, such as duration,

volume, and playback rate, that you can read or set (some properties are read-only). In addition, there are

DOM events that notify you, for example, when a media element is able to play through, begins to play, is

paused by the user, or completes.

For a complete list of methods, properties, and events that Safari supports, see HTMLMediaElement Class

Reference, HTMLVideoElement Class Reference, and HTMLAudioElement Class Reference.

Some of the ways you can use JavaScript with HTML5 media elements are:

At a Glance 9

INTRODUCTION

About HTML5 Audio and Video

● Create your own interactive audio or video controller—for an example, see “A Simple JavaScript Media

Controller and Resizer” (page 25).

● Enter full-screen video mode—for examples, see “Taking Video Full Screen” (page 32) and “Taking Your

Custom Controls Full Screen” (page 33).

● Display a progress indicator that shows how much of the media has downloaded—for an example, see

“Using DOM Events to Monitor Load Progress” (page 26).

● Load another audio or video when the current one finishes playing—for an example, see “Replacing a

Media Source Sequentially” (page 28).

● Test whether Safari can play the specified media type or specified media file—for examples, see “Using

JavaScript to Provide Fallback Content” (page 29) and “Handling Playback Failure” (page 30).

Set the Style with CSS3

Relevant Chapter: “Adding CSS Styles” (page 37)

Because the <audio> and <video> elements are standard HTML, you can customize them using CSS—set

the background color, control opacity, add a reflection, move the element smoothly across the screen, or

even rotate it in 3D. You can combine CSS with JavaScript to change media properties dynamically, in response

to user input or movie events.

You can also change the CSS properties of other parts of your webpage in response to media events. For

example, you could darken the background and reduce the opacity of the rest of the page—effectively

“dimming the lights”—when a movie is playing, or highlight the title of the currently-playing song in a playlist.

For more information, see “Changing Styles in Response to Media Events” (page 37) and “Adding CSS Styles

to Video” (page 40).

For code examples, see “Example: Setting Opacity” (page 40), “Adding a Mask” (page 41), “Adding a

Reflection” (page 43), and “Rotating Video in 3D” (page 47).

Prerequisites

You should be familiar with HTML and JavaScript. Familiarity with CSS is helpful. To create image masks, you

should be able to work with transparency (alpha channels).

使用HTML5在Safari中嵌入音频和视频指南

Safari Development

为了解决在safari浏览器video标签无法播放视频的问题

Safari_Developer_Guide

2010.08.10——— html5之video和audio

safariaudioquirks:使用Audio和WebAudio记录Safari的怪癖

Safari HTML Reference

HTML5多媒体标签详解：audio与video元素

探索HTML5新特性：canvas、audio/video与Web存储

HTML5新特性详解：Canvas、Audio、Video与Web存储

HTML5新特性解析：Video与Audio标签详解

最新资源