search

Home >Web Front-end >H5 Tutorial >Detailed explanation of new multimedia tags in HTML5

Detailed explanation of new multimedia tags in HTML5

藏色散人
藏色散人forward
2022-08-05 16:10:503324browse

This article will introduce to you the commonly used multimedia tags in HTML and the new multimedia tags in HTML5. I hope it will be helpful to friends in need!

New multimedia tags in HTML5

1: Video39000f942b2545a5315c57fa3276f220

Currently the 39000f942b2545a5315c57fa3276f220 element supports three video formats: try to use MP4 format

Browser MP4 WebM Ogg
IE YES NO NO
Chrome YES YES YES
Firefox YES Starting from Firefox21 version Linux system starting from Firefox 30 YES YES
Safari YES NO NO
Opera YES Starting from Opera25 version YES YES 
<video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none">
    <source src="medio/mov_bbb.mp4">
    <source src="medio/mov_bbb.ogg">
    您的浏览器暂不支持<video>标签播放视频</video>

Video39000f942b2545a5315c57fa3276f220——Common attributes

##autoplayautoplayThe video is ready to play automatically (Google browser needs to add muted to solve the autoplay problem) controlscontrolsShow playback controls to the user##width heightloopsrcpostermuted##2: Audio
Attribute value Description
pixels(pixels) Set player width
pixels(pixels) Play Device height
loop loop
url Video url address
imageurl Load the waiting picture
muted Mute playback
b97864c2e0ef2353a16c4d64c7734e92

BrowserMP3WavOggIE 9 YESNONOChrome 6 YESYESYESFirefox 3.6 YESYES YESSafari 5 YESYESNOYESGoogle Chrome disables automatic playback of audio and video
##Opera 10
YES YES 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HTML5音频标签</title></head><body>
   <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
   <source src="medio/music.mp3" type="audio/mpeg">
   您的浏览器不支持audio元素</audio>
   </body>
   </html>

PropertiesValue##autoplayautoplayAutoplaycontrolscontrolsShow playback controls to userlooploopLoop playsrcurlVideo url address mutedmutedMUTE PLAYMultimedia tag summary
Description

The audio tag and video tag are basically used in the same wayBrowser support is different

    Google Chrome disables the automatic playback of audio and video
  • We can add the muted attribute to the video tag to mute the video, but the audio cannot (can be solved through JavaScript)
  • The video tag is the key point. We often set up automatic playback, and control control and looping are not applicable. And set the size attribute
  • [Related recommendations:
    • css video tutorial
  • ]

The above is the detailed content of Detailed explanation of new multimedia tags in HTML5. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:jianshu.com. If there is any infringement, please contact admin@php.cn delete
Previous article：What is the doctype declaration of html5Next article：What is the doctype declaration of html5

Related articles

See more