Video and audio

1. Add a single video to the web page:Video elements

Video attributes:

  • SRC (source)- Specifies the URL of the video file
  • Autoplay – Starts playing the video as soon as it is ready toplay
  • Controls – Adds the default control that the browser sets for video
  • Muted – Muted a video conservation
  • Loop – Play the video in a loop
  • Poster – Specifies the image to display when the video loads
  • Width – The width of the video
  • Height – The height of the video
  • Preload – Tells the browser how much video content to load. It can have the following three values:
    • □ None Indicates that no video is loaded
    • □ Metadata Loads only video metadata

    • □ Auto: Let the browser decide what to do (default)

      <video src = "my-video.ext" width = "369" height = "208"> </video>
                                                                      
Copy the code

1. Add controls to the video: The Controls property tells the browser to add a set of controls to control the video playback.

<video src = "my - video.ext" controls> </video>
Copy the code

2. Add the Autoplay: Autoplay attribute to the video

 <video src = "my- video.ext" autoplay controls> </video> 
     
Copy the code

3. Specify the loop and auto play: loop properties for the video

 <video src = "my- video.ext" autoplay loop> </video> 
     
Copy the code

4. Add the specified poster image: poster attribute to the video

 <video src = "my- video.ext" controls poster= "my-poster.jpg"> </video> 
     
Copy the code

5. Prevent video preloading: preload=”none”

<video src= "my- video.ext" preload = "none" controls> </video> 	
Copy the code

6. Use video and alternate texts from multiple sources

<video controls>
<source src = "my- video.mp4" type = "video / mp4">
<source src = "my- video.webm" type = "video / webm">
</video>
Copy the code
Add a single audio file with controls to the web page: Audio element
<audio src="my-audio.ext" controls></audio>
Copy the code

Auto play, loop, and preload audio

 <audio src = "my- audio.ext" autoplay controls> </audio>
 <audio src = "my- audio.ext"loop controls> </audio>
 <audio src = "my- audio.ext" preload="metadata" controls> </audio>
 
Copy the code

Provide multiple video sources with multiple alternate content:

<audio controls> <source src = "my- audio.ogg" type = "audio / ogg"> <source src = "my- audio.mp3" type = "audio / mp3">  </audio>Copy the code