HTML5 Tutorial For Beginners - part 4 of 6 - Audio and Video

This series of videos demonstrates how to write HTML code that is compliant with the new HTML5 standards. These videos are good for beginners.

Part 1: This video describes HTML tags, elements, and attributes. The new HTML5 doctype declaration is shown as well as the method for specifying the character encoding for the document. The basic structure of an HTML document is also shown. This video introduces the html, head, meta, title, body, and p tags.

Part 2: This video describes how to use text. The p tag is demonstrated and the heading tags are introduced. The br tag is also shown. This video also touches on the importance of CSS. A quick demonstration of CSS is shown to center some text and to change its color. In older versions of HTML, text could be centered by using the align attribute. However, this attribute is deprecated and is not valid HTML5. While the align attribute may still work in your browser, it is not compliant with HTML5 standards. Therefore, learning CSS can be very beneficial when working with HTML5 code.

Part 3: This video demonstrates how to use images and hyperlinks. The difference between relative and absolute addressing is covered. This video shows the height and width attributes used with the img tag. In older versions of HTML, the height and width attributes could be specified in pixels or as a percentage. However, it is not valid HTML5 to specify these values as a percentage. If a percentage value is desired then CSS can be used.

Part 4: This video introduces 2 elements that are new to HTML5, the audio and video elements. While older browsers don't support these new elements, the popular newer browsers do.

Link to the code used in this video.

[emmieroark]

I loved the videos so far, I was able to do everything as you instructed up until the instructions for the video. I found another way to help those who may have had a problem with this part of the tutorial.(I used a video from Youtube.) To download this, you pause the video you want, click on SHARE, then click on EMBED, then copy the URL in the field. Then go to your text editor and paste this between the HEAD tags. This worked for me.

[NeilRoy]

Note: as of 2016, all of the popular browsers support MP3 and MP4 files.

[RenaissanceBoss]

Perfect Training. Clear, concise and to the point. I love it.

[hananabboud]

Thank you. Straight forward and simple exactly what I needed.

[tutoru]

Yes. The video element supports both height and width attributes. You can add them to the video start tag.

[DomWorstNW]

when I do it  I dont have any audio or video ... ?

just the play button sound buttons etc

but nothing shows up

help?

[PrudviRaju]

sir audio and video are not supporting in my browser . plz help me what to do.

[nappybutthairz]

i need help when i upload my mp4 i downloaded a sample from the internet. its name is "sample quality.mp4"

i put this code in html:

<video controls>
 <source src="quality_sample.mp4">
</video>


and it just has a loading screen on safari when i open it. can someone tell me what im doing wrong.

[Edgarxl]

A well set out and really informative series of tutorials for the HTML novice that I was 30 minutes ago. Thanks

[littledrummerboy]

Is it possible to change the height and width of video? If I add a 1080p video it takes up the whole page...

[LucianoMartinss]

Video feature doesn't works here and didnt show the message.
video controls autoplay
source src="todinho.mp4" type="video/mp4"
Seu navegador não suporta este formato de vídeo.
/video

[syedsamiulhuda]

How can I play more than one audio or video file at a time??? I can play video and audio both together but I can't play two videos or two videos at the same time any kind of help will be highly appreciated. Thanks

[insertnamehere.]

How do u know if the file is a ogg or a mp3/4 also if u put audio and link a video it will only play the audio?

[xiu]

Im trying to put an mp3 file in my html but the mp3 doesnt show can anyone please help me

[johndoe]

There is an excellent opportunity at BRISTOL STUDIOS Take your home recordings to the next level in these informative and hands-on workshops.
Call Jason at 617-247-8689 to reserve your spot or with any questions.

Oct 1:Home Recording 8: EQ, Compression and other effects
Learn how to use EQ, compression and other effects to take your music to the next level.
Also, check bristolstudios for more info

[Zeckarai]

Great tutorial! But I'm having a problem with the video, it only shows up like the audio, and only plays the audio, no video :/ Help please :)

video controls>
src="video/Wildlife.mp4" type="video/mp4">
src="video/Wildlife.ogg" type="video/ogg">
/video>
Is the code I used :) I've taken away < to able to comment btw :)

[AutoPilot]

I love your tutorials they taught me a lot but I am having one problem with the image/audio/video links the src="ball.jpg" never worked as a image. The audio bell never worked when I put the code in it just showed a control for the audio but nothing on it. Same for the video showed the control just wouldn't play anything.

[PrashantKumar-nmtc]

Thanks Sir. Its all videos is helpful  for beginner

[idlequalms]

thanks for the tutorials. I have a question... if I add multiple audio tags with different src files, say audio track a and audio track b, and I play track a, then play track b and make track a pause when you click play for track b... so that only one audio can play at a time...if that makes sense...

[natebrewer]

Great video tutorial, love your work!