Teach you how to use HTML5 audio and video well

HTML5 supports embedded media through the HTML tags "audio" and "video", allowing developers to easily embed media into HTML documents.

Embed MediaEDIT

Embed media in HTML:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>  你的浏览器不支持 <code>video</code> 标签.</video>

This example shows a playable video with a playback controller, video Sourced from Theora website.

The following is an example of embedding audio into an HTML document.

<audio src="/test/audio.ogg"><p>你的浏览器不支持audio标签</p></audio>

srcAttribute can be set to the URL of an audio file or the path to a local file.

<audio src="audio.ogg" controls autoplay loop><p>你的浏览器不支持audio标签</p></audio>

The code of this example uses some attributes of the HTML "audio" element:

controls: Display standard HTML5 controllers for audio in web pages.

autoplay : Make the audio play automatically.

loop: Make the audio play automatically and repeatedly.

<audio src="audio.mp3" preload="auto" controls></audio>

The preload attribute is used to buffer large files with audio elements. There are three attribute values ​​to set:

"none" does not buffer files

"auto" Buffering audio files

"metadata" Only buffering file metadata

You can use the e02da388656c3265154666b7c71a8ddc tag to specify multiple files to provide supported encoding formats for different browsers. For example:

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.</video>

When the browser supports the Ogg format, this code will play the Ogg file. If the browser does not support Ogg, the browser will play MPEG-4 file. See the list of media formats supported by audio and video elements to see the support for video and audio encoding formats by different browsers.

You can also specify the video codec value required by the video file; this allows the browser to make a more correct decision:

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=
dir
ac, speex">
  Your browser does not support the <code>video</code> element.</video>

Here, we specify the video tag using Dirac and Speex video codec. If the browser supports Ogg but does not support the specified codec, the video will not be loaded.

If the type attribute is not specified, the media type will be returned to the server and then checked to see if the browser can resolve it; if it cannot be executed, the next source is checked. If none of the specified source elements are available, an error event is dispatched to the video tag. If the type attribute is specified, it will be compared with the types that the browser can play. If it is not recognized, the server will not even be asked; instead, the next source will be checked at the same time.

Click on Media Events to view the complete list of media playback events. To see details about the media formats supported by different browsers, click Media formats supported by the audio and video elements.

Media Playback ControlEDIT

After you have embedded media into an HTML document using new elements, you can control them programmatically using JavaScript code. For example, if you want to (re)start playback, you can write the following code:

var v = document.getElementsByTagName("video")[0];v.play();

The first line obtains the first video element in the current document, and the next line calls the play() method of the element. This method is defined in the interface that implements the media element.

Controlling the play, pause, volume increase and decrease of an HTML5 audio player is straightforward:

<audio id="demo" src="audio.mp3"></audio><p>
  <button 
onclick
="document.getElementById(&#39;demo&#39;).play()">播放声音</button>
  <button onclick="document.getElementById(&#39;demo&#39;).pause()">暂停声音</button>
  <button onclick="document.getElementById(&#39;demo&#39;).volume+=0.1">提高音量</button>
  <button onclick="document.getElementById(&#39;demo&#39;).volume-=0.1">降低音量</button></p>

Terminate media download EDIT

Stopping media playback is as simple as calling the pause() method. However, the browser will continue to download media until the media elements are recycled by the garbage collection mechanism.

Here's how to stop media downloads immediately:

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");

By removing the src attribute of the media element (or simply setting it to an empty string - this Depending on the browser), you can destroy the element's internal decoding, thus ending the media download. The removeAttribute() operation is not clean, and setting the 'src' attribute of the 39000f942b2545a5315c57fa3276f220 element to an empty string may cause unwanted requests (Mozilla Firefox 22).

Find EDIT in media

Media elements support moving from the current playback position to a specific point in the content of the media. This is accomplished by setting the value of the element's currentTime property; see HTMLMediaElement for details on element properties. Simply set the time in seconds you want playback to continue.

你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的TimeRanges 时间对象。

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();
  // 返回开始时间
   (in seconds)mediaElement.seekable.end();
    // 返回结束时间 (in seconds)mediaElement.currentTime = 122;
     // 设定在 122 secondsmediaElement.played.end();
      // 返回浏览器播放的秒数

标记播放范围EDIT

在给一个b97864c2e0ef2353a16c4d64c7734e92或者39000f942b2545a5315c57fa3276f220元素标签指定媒体的URI的时候，你可以选择性地加入一些额外信息来指定媒体将要播放的部分。要这样做的话，需要附加一个哈希标志("#")，后面跟着媒体片段的描述。

一条指定时间范围的语句：

#t=[starttime][,endtime]

时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。

【相关推荐】

1. html/css免费视频教程

2. 教你如何增强H5中video标签在浏览器中的兼容性

3. 详解HTML5展示视频的标准

4. 简述39000f942b2545a5315c57fa3276f220标签的参数和属性

5. 分析H5网页中video标签中的MP4视频无法播放的缘由

The above is the detailed content of Teach you how to use HTML5 audio and video well. For more information, please follow other related articles on the PHP Chinese website!