HTML5 video Accumulation

It's been a few months without writing, or too lazy ~ must educate themselves Luo ~

This time to do a video of the mobile H5, not carefully played before, good record of the basic knowledge, there are some pits encountered, convenient after meeting again to solve

First, the basic

Video tags are still relatively poor in compatibility, if you want to use the video tag on the page, you need to consider three scenarios, support Ogg Theora or VP8 (Opera, Mozilla, Chrome), support for H. 9 (Safari, IE, Chrome), are not supported (IE6, 7, 8). But because H5 on mobile devices, the basic use of the WebKit kernel, only need to consider the Android, iOS device differences.

<video id= "video"AutoPlay= "AutoPlay"Loop= "Loop"preload= "Auto"Controls= "Controls"src= "Movie.mp4"Poster= "Pre.jpg"width= "640"Height= "The ">Browser does not support, change a little bit of it</Video>

The video tag contains several properties, such as SRC, poster, preload, AutoPlay, loop, controls, width, height, and a label used internally <source>. In addition to the <source> tag, the video tag can contain content that is returned, such as the text above, when the specified videos cannot be played.

1. src

Is the URL of the media file, do not use this tag can also be used internal tag <source>, but personally think with Src look good ~ same browser to media file format has requirements, support 3 kinds of format ogg, MP4, WebM, compatibility as follows

Format IE Firefox Opera Chrome Safari
Ogg no 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No no 5.0+ 3.0+
WebM no 4.0+ 10.6+ 6.0+ No

2, poster

The poster property is used to specify the URL of a picture to display when the current video data is invalid. Invalid video data may be video loading, possibly video address error, and so on. This property is very useful, especially when the network is not very good, the first picture of the video is placed there, and then when the video playback there is no vainly disobey sense.

3, preload

This property is used to define whether the video is pre-loaded. The property has three selectable values: None, metadata, auto. If you do not use this property, auto is the default.

None: Pre-loading is not done;

Metadata: Partial preload (including size, first frame, track list, duration, etc.);

Auto: Pre-load all;

4, AutoPlay

The AutoPlay property is used to set whether the video plays automatically, when it appears, to automatically play, and to remove the non-AutoPlay. (This property is pretty useless on mobile devices.)

5. Loop

Loop property to specify whether the video is looped back

6. Controls

If this property appears, the control is displayed to the user, including play pause control, playback progress Control, volume control, and so on.

7, width, height

width, Height luo

Ii. Methods and Events

var video = document.getElementById ("video");

1. Properties and Methods

A, error

Video.error; Null: Normal

Video.error.code; return error code 1. User Termination 2. Network error 3. Decoding Error 4.URL invalid

b, Network status

VIDEO.CURRENTSRC; Returns the URL of the current resource

VIDEO.SRC = value; Returns or sets the URL of the current resource

Video.canplaytype (type); Whether you can play a resource in a certain format

Video.networkstate; Returns the network status code 0. This element is not initialized 1. Normal but not using network 2. Downloading Data 3. No Resources found

Video.load (); Reload the resource specified by SRC

video.buffered; Returns the buffered area

Video.preload; Return preload information none: no preload metadata: Preload resource information Auto:

C, playback status

Video.currenttime = value; Current playback position, assignment can change position

Video.starttime; Typically 0, not 0 if it is a streaming medium or a resource that does not start at 0

Video.duration; Current resource length stream returns unlimited

video.paused; Whether to pause

Video.defaultplaybackrate = value;//The default playback speed, you can set

Video.playbackrate = value;//Current playback speed, change immediately after setting

video.played; Returns the area that has been played, timeranges

video.ended; Whether to end

Video.autoplay; Whether to play automatically

Video.loop; Whether to loop playback

Video.play (); Play

Video.pause (); Time out

D, Video control

video.controls;//whether there is a default control bar

Video.volume = value; Volume

video.muted = value; Mute

2. Events

function (){    //.....})

XXX is the event type

Loadstart//client starts requesting data

Progress//client is requesting data

suspend//delay Download

Abort//Client actively terminates the download (not due to an error)

Loadstart//client starts requesting data

Error//Request data encountered errors

Stalled//Speed stall

triggered when play//play () and AutoPlay start playing

Pause//pause () Trigger

Loadedmetadata//Successful acquisition of resource length

waiting//wait for data, not error

playing//Start Playback

canplay//can be played, but may be paused halfway through loading

canplaythrough//can play, all the songs are loaded

Seeking//Search in

seeked//Search Complete

Timeupdate//Play time change

ended//Playback End

ratechange//Playback Rate Change

Durationchange//Resource length change

Volumechange//volume change

Third, the development of the pits encountered

1. mp4 files can only play audio part in the browser, the video part does not display

This is the beginning of the development of the problem, because the video is recorded by the SLR, filter, editing and other processing to export AVI format, and then through the format factory to convert to MP4, but in the browser obstinately no video shows only audio sound. The final confirmation is that the video conversion is the encoding problem, the format factory can choose some encoding format when converting, including MPEG2, MPEG4, AVC, WMV2 and so on. Choose AVC, then it was drunk.

2. mp4 file cannot be played on Apple device's browser, Android is good

Play button on a large slash, indicating that can not play, then the heart tears. The problem was found because there was no rang request header in the HTTP protocol, specifically related to how the iOS player uses the HTTP protocol for MP4 parsing. The most convenient and quick solution is to use Nginx to store MP4 files.

The HTTP header range, Content-range, indicates HTTP breakpoint continuation

Range

For the request header, specify the position of the first byte and the position of the last byte, in general format:

Range: (Unit=first byte pos)-[last byte POS]

Content-range

For the response header, which specifies the insertion position of a part of the entire entity, he also indicates the length of the entire entity. When the server returns a partial response to the customer, it must describe the extent of the response coverage and the entire length of the entity. General format:

Content-range:bytes (unit first byte POS)-[Last byte pos]/[entity legth]

request to download the entire file:

1. Get/test.rar http/1.1
2. Connection:close
3. host:116.1.219.219
4. range:bytes=0-801//General request to download the entire file is bytes=0-or without this header

General Normal response

1. http/1.1 OK
2. content-length:801
3. Content-type:application/octet-stream
4. Content-range:bytes 0-800/801//801: Total File size

3, iOS device AutoPlay does not take effect, you must manually call the play () method

AutoPlay really is a pretty little function of the properties, iOS can not play automatically, need to JS call Play () method, the solution is

<Script>            if ("Wview" inchwindow) { //for automatic playback of Apple devicesWindow.wView.allowsInlineMediaPlayback= "YES"; Window.wView.mediaPlaybackRequiresUserAction= "NO"; }</Script>

Add the above JS code to the head tag of the HTML file

4. Unable to play on some Android devices

Unable to play means AutoPlay this ghost is not used, while calling the play () method same as the egg, this question I also do not know what the reason is, the code copied online

In particular, the user's phone type needs to be judged when playing, and iOS and Android devices are handled separately

var isios =!! Navigator.userAgent.match (/\ (i[^;] +;( U;)? Cpu.+mac OS x/);

Then the iOS device directly using AutoPlay This property or call the play () method, the Android side need to add a picture on the video, by clicking on the image and then playing, 100ms after setting the video time to 1 S, and then play again, OK

$ (video). CSS ({    "block"}); $ (". Androidbegin"). Show (); $ (function(a) {    Video.play ();    SetTimeout (function() {        = 1;        Video.play ();         $ (". Androidbegin"). Hide ();    $ (video). Unbind ("Touchstart");})

If you do not join the Click event, directly invoke the play code within the click event, then the video will be finished directly, feel wonderful, and then is to play multiple videos, only the first to use the above code to trigger the line, after the video directly call the Play () method, if the great God encountered a similar problem, There is a better way, please advise, thank you!

HTML5 video Accumulation