Attention:
1. About video format, different browser support is not the same, Safari--mp4 CHROME--WEBM Firefox opera--ogv,ie8 or earlier browsers do not support
2. Statement detailed <video id= "video" poster= "Images/prerollposter.jpg" width= "height=" 360
<source src= "Video/preroll.mp4" >
<source src= "VIDEO/PREROLL.OGV" >
<source src= "VIDEO/PREROLL.WEBM" >
<p>sorry, your browser doesn ' t support the video element</p>
</video>
3. If you want to add a flash plug-in to handle the browser does not support HTML5 playback, you can <video>xxxxx <object>flash code</object> </video>
Some common property methods and events for the 4.video element API
5. You can use events like ended to add playlists
var video; Video = document.getElementById ("video");
Video.addeventlistener ("ended", Nextvideo, false); Increase the listener event and continue the Nextvideo function
6.canPlayType method that allows the browser to determine whether a file type can be played
Video.canplaytype ("Video/mp4"); The MP4 format in the video directory returns two values, and an empty string represents the impossibility, maybe says maybe
Video.canplaytype (' Video/mp4; codecs= "Theora, Vorbis"); If you add a specific type of codec, you may have one more return value, probably may end up
6. Use load and play in JS
Video.load ();
Video.play ();
Complete code:
var position = 0;
var playlist;
var video; Window.onload = function () {playlist = ["Video/preroll", "Video/areyoupopular", "Video/destinationearth"];
Add playlists = document.getElementById ("video"); Video.addeventlistener ("ended", Nextvideo, false); Increase the Listener event VIDEO.SRC = playlist[position] + getformatextension ();
Add filename video.load ();
Video.play ();
};
function Nextvideo ()//Next video function {position++;
if (position >= playlist.length) {position = 0;
} VIDEO.SRC = Playlist[position] + getformatextension ();
Video.load ();
Video.play ();
} function Getformatextension ()//format judgment function {if (Video.canplaytype ("Video/mp4")!= "") {return ". mp4";
else if (Video.canplaytype ("VIDEO/WEBM")!= "") {return ". WebM";
else if (Video.canplaytype ("Video/ogg")!= "") {return ". ogg";
}/** * Created by Andrewlee on 13-11-5. * * <!doctype html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
