HTML5 video, html5
<Video> tags are used to define videos.
Case 1:
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
</Head>
<Body>
<Video width = "300" height = "300" controls = "controls">
<Source src = "gsd.mp4" type = "video/mp4">
<Source src = "gsd.ogg" type = "video/ogg">
Your browser does not support video tags
</Video>
</Body>
</Html>
1 (Browser Support)
2 (not supported by browsers)
Note:
(1) controls is used to display the playback, pause, and volume buttons to users. The attribute value is: controls;
(2) autoplay is used to control the video to play immediately after the video is ready. The attribute value is autoplay;
(3) loop is used to control the playback after the video is played. The attribute value is loop;
(4) preload is used to control the loading and preparation of video during page loading. If "autoplay" is used, this attribute is ignored. The attribute value is preload;
(5) src video links. The video element allows multiple source elements in different formats. The browser uses the first identifiable format;
(6) text content can be placed between <video> </video>, so that the browser can display information that does not support this label;
(7) <video> has methods, attributes, and events such as play () and pause (). The example is as follows:
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Script>
Function clickA (){
Var a = document. getElementById ("ex_1 ");
If (a. paused ){
A. play ();
} Else {
A. pause ();
}
}
</Script>
</Head>
<Body>
<Video id = "ex_1" width = "300" height = "300" controls = "controls">
<Source src = "gsd.mp4" type = "video/mp4">
<Source src = "gsd.ogg" type = "video/ogg">
Your browser does not support video tags
</Video>
<Br/>
<Button onclick = "clickA ()"> play/pause </button>
</Body>
</Html>
(Supported by the browser)
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
