Video Tag
We can publish a video on our web page using the video tag that comes with html5. Thanks to video tag, if the browser is not supported by our video files we can identify alternative options in case.
<video width="300" controls>
<source src="video1.mp4" type="video/mp4">
<source src="video1.flv" type="video/ogg">
The video cannot be played.
</video>
In the example above, if the video1.mp4 file cannot be opened, the video1.flv file will be opened. If it also fails to open, the text "Unable to play video" will be displayed.
When the width parameter here is given in pixels, the width of the video will always be fixed. If we want to get responsive videos, that is, videos that expand or contract according to the user's screen, we can use Css to give the width in %.
video {
width: 100%;
height: auto;
}
When the above css codes are applied, our video will shrink and expand according to the screen width. However, using width:100% can be risky because our video will continue to expand even when the video space on the screen is larger than the original size of the video.
Therefore, the following css codes will be more useful.
video {
max-width: 100%;
height: auto;
}
Embed Tag
We can add audio, video and animation to our page using the embed tag. Its usage is as follows.
<embed src="musicFile.mp3" autostart="false" />
<embed src="videoFile.avi" autostart="false" />
The interface of the video/music player program will appear in the section where the above line is written. In this way, the user can make settings such as play, pause, volume.
The autostart parameter determines whether playback starts automatically when the page is loaded.
Adding video to web page, adding html5 audio video, adding responsive video, sizing the video according to the screen, use of embed and video tags
EXERCISES
There are no examples related to this subject.
Read 843 times.