HTML5CSS3 Learning Summary (3)

HTML Multimedia
Video and audio Two multimedia tags basically use the same method, there is no big difference.
<video src= "Statics/.mp4"
Muted Mute
AutoPlay Auto Play
Loop loop
Constrols Control Panel
></video>
Ovideo
. Play () play
. Pause () pauses
. Volume volume
. Muted Mute
. CurrentTime Current Playback time
The. Duration has been played time
. onended Play End
. Ontimeupdate returns the current playback progress
. Webkitrequestfullscreen () fullscreen chrome
. Mozrequestfullscreen () Full screen Firefox

Music player Code

<!     DOCTYPE html>li{Cursor:pointer;        } li:hover{Color:grey} li.active{color:silver; } li.active:before{Content:url (statics/play.gif);        }    </style>varOul = Document.queryselector (' ul '); varOaudio = Document.queryselector (' Audio '); varORange = document.queryselector (' input '); varOplay = Document.queryselector (' #play '); varOpause = Document.queryselector (' #pause '); varOnext = Document.queryselector (' #next '); varoprevious = Document.queryselector (' #previous '); varAplaymode = Document.queryselectorall ('. Play-mode ')); varCurrentindex = 0; varPlayMode = "Listrepeat"; //Adjust VolumeOrange.oninput =function() {Oaudio.volume= orange.value/100;        }        //PlayOplay.onclick =function() {Playsong (); }        //PauseOpause.onclick =function() {oaudio.pause (); }        //Song list        varSongs = [            "The girl in the Greenhouse",            "The King of comedy",            "Counting-stars",            "Greenslave",            "Young-for-you"        ]        //looping the song list, creating a div to add to the pageSongs.foreach (function(song) {varOLi = document.createelement (' li '); Oli.innerhtml=Song;        Oul.appendchild (OLi); })        varALi = Document.queryselectorall (' li '); //Next SongOnext.onclick =function(){            //Select the next song according to the playback modePlaynextsong (); } oaudio.onended=function(){            //Select the next song according to the playback modePlaynextsong (); }        //Last SongOprevious.onclick =function() {Playprevioussong ()}//Click PlayAli.foreach (function(oli,index) {Oli.onclick=function() {Currentindex=index;            Playsong (); }        })        //Playback mode ChangesAplaymode.foreach (function(oplaymode) {Oplaymode.onclick=function() {PlayMode= This. ID;            Console.log (PlayMode); }        })        //play the next song's Judgment logic        functionPlaynextsong () {if(PlayMode = = ' Listrepeat ') {Currentindex++; Currentindex= currentindex%songs.length;            Playsong (); } Else if(PlayMode = = ' Singlerepeat ') {Playsong (); } Else if(PlayMode = = ' Random ') {Currentindex= Rnd (0, Songs.length,currentindex);            Playsong (); }        }        //Last Song        functionPlayprevioussong () {if(PlayMode = = ' Listrepeat ') {Currentindex-- ; if(Currentindex < 0) {Currentindex= Songs.length-1} playsong (); } Else if(PlayMode = = ' Singlerepeat ') {Playsong (); } Else if(PlayMode = = ' Random ') {Currentindex= Rnd (0, Songs.length,currentindex);            Playsong (); }        }        functionPlaysong () {oaudio.src= ' statics/music/${songs[currentindex]}.mp3 '; //Remove the original activedom node            varActiveone = Document.queryselector ('. Active ')) Activeone&& activeOne.classList.remove (' active '); Ali[currentindex].classlist.add (' Active ');        Oaudio.play (); }                functionStopplay () {varoactive = Document.queryselector ('. Active ')); Oactive&& oActive.classList.remove (' active '); //Stop playingOaudio.currenttime = 0;        Oaudio.pause (); }        //random number, passed in a special value, is used to judge. If this value has been. And then return directly to the new random, without words.        functionRnd (n,m,special) {varresult = parseint (Math.random () * (m-n) +N); returnresult = = Special?Rnd (n,m,special): result}</script></body>

Video format
Mp4√
AVI RMVB FLV mov mkv 3gp wmv
Audio format
Mp3√
WMA Ape M4A


<input> Forms
Type= "emial" form internal verification of the format is unreliable
The following property, Boolean, is invalid for it
Pattern= "[A-za-z]{3}". Type regular for input box validation input
<input type= ' text ' readonly/>readonly means read only and cannot be changed;
Disabled Block Click Disable
Placeholder placeholder input Box placeholder text
<input type= "text" required/> must enter content to submit;
Autofocus Auto-focus input Box
Type= "COLOR" colors
Type= "Time"
Type= "Date" dates
Type= "Week" weekend
Type= "Search" the input box has a clear button;
type= "File" files

HTML5 file drag and drop
OnDragEnter
Drag and drop files into
OnDragLeave
Drag and drop files to leave
OnDragOver
Drag-and-drop file hover (always triggered)
OnDrop dropped the file.
To trigger:
Default event for DragOver must be canceled
EV-Ev.dataTransfer.files
OnDragEnter and OnDragLeave have problems, with settimeout plus ondragover simulation;
FileReader

File Object
var file = Ev.datatransfer.files[0];
var reader = new FileReader (); File Read Object

There are two events under reader
. Readastext read-only text (Ev.srcelement.files[0])
. Readasdataurl image, video, audio (ev.srcelement.files[0])

Reader
. onloadstart file Load Start
{Loaded Total} can draw a progress bar scale in the. onprogress file load
. onload can get the Reader.reslut data.
The. onloadend file is loaded and completed;

The. Error file failed to load
. abort file Load termination

. Abort (); file load terminated

Read file:
Reader.result

Text files: Text
Multimedia files: Base64 encoding

Input type= "file"
Files, srcelement, Ev
HTML5CSS3 Learning Summary (3)