1. The audio on the Internet
Until now, still does not exist a standard designed to play audio on a Web page.
Today, most audio through the plug-in (such as Flash) to play. However, not all browsers have the same plugins.
HTML5 predetermined standard embedded audio element on a page, i.e., the use of
2. Insert the music <audio> tag
Currently,
<audio controls>
<source src="./mp3/卡农慢摇版.mp3"></source>
</audio>As shown (not the same effect each browser)
to set auto-play and Views
autoplay: If this attribute is present, the audio playback immediately after the ready.
loop: If this attribute is present, then whenever the audio end start playing again.
Note: Chrome after the update in October 2018 closed the audio, video media autoplay autoplay, the new version of Firefox is not supported. It just said it does not support automatic play mp3 format, but can support audio format automatically play ogg
<audio controls autoplay loop>
<source src="./mp3/卡农慢摇版.mp3"></source>
</audio>Other attributes:
PRELOAD: Auto | the Metadata | none specify whether the audio load after the page loads
muted: If this attribute is present, the audio output is muted.
3. Insert video <videos> tag
Currently,
<video controls>
<source src="./source/最终幻想神罗三巨头乱斗.mp4"></source>
</video>
4. <source> tag
The label media element (for example
<audio controls autoplay loop>
<source src="./source/卡农慢摇版.ogg" type="audio/ogg"></source>
<source src="./source/卡农慢摇版.mp3" type="audio/mpeg"></source>
您的浏览器不支持 audio 元素。
</audio>The switching media file
You can operate audio or video src attribute to switch the file to play
<body>
<audio controls autoplay loop>
<source src="./source/卡农慢摇版.ogg" type="audio/ogg"></source>
<source src="./source/卡农慢摇版.mp3" type="audio/mpeg"></source>
您的浏览器不支持 audio 元素。
</audio>
</body>
<script>
var audio = document.getElementsByTagName("audio")[0]
// 8秒钟后会切换到另一首歌
setTimeout(function(){
audio.src="./source/再见警察.mp3"
console.log(audio.src)
},8000)
</script>6. The custom video player
Native playback control panel style in different browsers are not the same, it is generally used is a custom video player
custom video player is still using the video tag, but without using the playback control panel native, but the use of control panel own definition.
Custom control panel js need to listen for the song / next song, volume control, drag the progress bar control, etc.
Note: Because the latest browser has shielded auto play, and control playback directly call js code is invalid, click listener must be set in order to control the playback callback
Commonly used methods:
the Load () to load the video
play () play video
pause () Pause Video
Common attributes:
paused state whether the video is paused
duration video length (in seconds)
currentTime video current progress (in seconds)
Common events
oncanplay the user can start playing video trigger
trigger ontimeupdate playback progress update
trigger when finished playing onended