HTML5 Tag Video Audio

Source: Internet
Author: User

If the video or audio data is preloaded, the browser will pre-buffer the video or audio data if it is pre-loaded.

Preload value None, metadata, auto (default)

None: Not preloaded

Metadata: Only pre-loaded media metadata (media bytes, first frame, playlist, duration, etc.)

Auto: Pre-load all video or audio

Original address: http://www.cnblogs.com/Jacklovely/p/5642000.html

This article directory:

1. Total length of the film

2. Get the movie playback time and set the play point

3, the volume of Access and settings

4. Properties

<video id= "Myvideo" Controls preload= "Auto" width=300 height= "165"         poster= "http://img0.ph.126.net/ I10jquujdmlete_xyl4hog==/6608842237655242020.jpg "         src=" http://www.w3cschool.cc/try/demo_source/ Mov_bbb.mp4 "></video>

<script>

var myVideo = document.getElementById(‘myVideo‘);

</script>

First, get the total length of the film

To get the total length of time, to use a video event Loadedmetadata, the event triggered by the metadata (some basic information of the media) has been loaded, with AddEventListener to listen to the event, it is important to note that the total length of time to obtain the unit in seconds

Myvideo.addeventlistener (' loadedmetadata ',function() {    var// get total Duration, Unit is S})

Second, get the movie playback time and set the play point

Gets the playback time of the movie, and when the video plays, the console continuously outputs the video current time

myVideo.addEventListener("timeupdate", function(){

var currenttime = Myvideo.currenttime; //Get current playback time

    console.log(currentTime);//在调试器中打印

})

Set Play Point

Throws a Invalid_state_err exception if no media data is available at the modified location

myVideo.currentTime = num;

3, the volume of Access and settings

The volume range value is 0~1, which is generally used as a percentage in the UI, so you need to convert it.

Get Current volume
Myvideo.addeventlistener ("Volumechange",function() {
var volume=myvideo.volume//Get Current volume})
Set volume
function Setvol (num) {
Myvideo.volume=num;
}

4. Properties

Original address: http://www.alixixi.com/web/a/2015051294738.shtml

Defaultplaybackrate Property: You can use the video element or the Defaultplaybackrate property of the audio element to read or modify the media default playback rate.

Playbackrate Property: You can use the video element or the Playbackrate property of the audio element to read or modify the current playback rate of the media.

Muted: Use the video element or the muted property of the audio element to read or modify the muted state of the media, which is a Boolean value, and True indicates that it is muted and false indicates that it is in a non-muted state.
Played
:The played property of the video element or audio element to return a Timeranges object from which the time period of the played part of the media file can be read. The start time is the start time of the played part, and the end time is the end time of the part that has been played.

paused Property: Returns a Boolean value using the Paused property of the video element or audio element to indicate whether the media is paused and true indicates that the media is playing;

ended Properties: Use the ended property of the video element or audio element to return a Boolean value that indicates whether playback is complete, and true indicates that the media has finished playing, and False indicates that the media has not finished playing.

Load Method : Use the Load method to reload the media for playback, automatically change the value of the element's Playbackrate property to the value of the Defaultplaybackrate property, and automatically change the value of the element's error to null.

Networkstate Property

During media data loading, you can use the Networkstate property of the video element or audio element to read the current network state, with a total of 4 possible values;

1. Network_empty (numeric value 0): The element is in its initial state.

2. Network_idle (A numeric value of 1), the browser has chosen what encoding format to use to play the media, but the network connection has not been established.

3. Network_loading (numeric value 2): Media data loading

4. Network_no_source (The numeric value is 3), there is no supported encoding format, no loading is performed.

Error property:

During normal reads, the error property of the video element or audio element is null during the use of media data, but any time an error occurs, the Error property returns an Mediaerror object with code that returns the corresponding error state. A total of 4 possible values:

    1. Media_err_aborted (A numeric value of 1), the download process for media data is terminated due to the user's operational reasons.
    2. Media_err_network (A numeric value of 2) confirms that the media resource is available, but the download of the media data is aborted when a network error occurs.
    3. Media_err_decode (A numeric value of 3) confirms that the media resource is available, but an error occurred while decoding.
    4. media_err_src_not_supported (numeric value 4), media Resource unavailable or media format not supported
Myvideo.addeventlistener (' ERROR ',function() {
      Switch (myVideo.error.code) {
        Case 1:
           alert ("The download process for the video is aborted");
        break;

        Case 2:
            alert ("The network fails, the download process for the video is aborted");
        break;

        Case 3:
            alert ("Decoding failed");
        break;

        Case 4:
            alert ("Media resource unavailable or media format not supported");
        break;
Default:
Alert (' An unknown error occurred ')
   }
},false)

HTML5 Tag Video Audio

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.