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> 標(biāo)簽.</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標(biāo)簽</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標(biāo)簽</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 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

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來(lái)決定媒體目前能查找的范圍。它返回一個(gè)你可以查找的TimeRanges 時(shí)間對(duì)象。

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();
  // 返回開(kāi)始時(shí)間
   (in seconds)mediaElement.seekable.end();
    // 返回結(jié)束時(shí)間 (in seconds)mediaElement.currentTime = 122;
     // 設(shè)定在 122 secondsmediaElement.played.end();
      // 返回瀏覽器播放的秒數(shù)

標(biāo)記播放范圍EDIT

在給一個(gè)

一條指定時(shí)間范圍的語(yǔ)句：

#t=[starttime][,endtime]

時(shí)間值可以被指定為秒數(shù)（如浮點(diǎn)數(shù)）或者為以冒號(hào)分隔時(shí)/分/秒格式（像2小時(shí)5分鐘1秒表示為2:05:01）。

【相關(guān)推薦】

1.?html/css免費(fèi)視頻教程

2.?教你如何增強(qiáng)H5中video標(biāo)簽在瀏覽器中的兼容性

3.?詳解HTML5展示視頻的標(biāo)準(zhǔn)

4.?簡(jiǎn)述

5.?分析H5網(wǎng)頁(yè)中video標(biāo)簽中的MP4視頻無(wú)法播放的緣由

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!