How to play different video according to Day in HTML?

 HTML5 has the most important features that support for multimedia ,In previous version you need to plug in to play video or audio.The world wide web consortium (W3C) firstly introduced the video element for the purpose of playing videos and movies at the web pages without help of any plug ins.But W3C does not responsible for videos formats developer must provide formats that are available across the web browsers.

some popular video formats that are uses

 ogg/Theora(.ogv extension)

Ogg/Theora format appears to be a format that is royalty free without patent issues and

supported by the Firefox, Chrome, and Opera browsers.

WebM/VP8 (.webm extension)

WebM/VP8 video format is supported by the Firefox, Chrome, Opera, and Android

browsers. In addition, Internet Explorer 9+ will support this format when the VP8 codec

is installed.

MPEG-4/H.264 (.mp4 extension)

 This format is supported by the Internet Explorer, Chrome, and Safari browsers, but Chrome has announced its intent to remove support for MPEG-4/H.264 in the near future.

the <video> element play video at web pages you can use it with some important attributes The following is a sample example of <video> element.<video> element.

 <video width="340" height="260" controls="controls">

<source src="movie.mp4" />

You need a new web browser that supports HTML5.

</video>

Setting the source

The <source> element is a specifies path of  video source. you need to set the src attribute to the URL of the video. and also make a setting  include more than one <source> element to provide many sources so the web browser can choose the most appropriate video codec. 

 here given some formats of videos.

<video controls="controls" height="480">

<source src="eagle.webm" type='video/webm; codecs="vorbis, vp8"' />

<source src="eagle.ogv" type='video/ogg; codecs="theora, vorbis"' />

<source src="eagle.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

</video>

Good Configuring of  <video> element

The <video> element  provide the good behavior you need for your web web page.

Some  of the attributes you can use to configure the <video> element .

(A) auto play Specifies that video starts playing immediately.

(B)controls Specifies that the play/pause button, video cursor, and maximize be displayed.
(C)height Indicates the height in pixels of the rendered <video> element.
(d)loop Specifies that the video will repeat when it has reached the end of its stream.
(E)muted Specifies that the audio is silent.
(F)poster Specifies that the URL of an image is to be shown when the video is not playing.
(G)reload Specifies how the video should be loaded when the page loads. It can be set
to auto, metadata, or none. The auto setting starts loading the video when the page
loads. The metadata setting loads only the metadata, and the none setting doesn’t
load anything.
(H) src Specifies the URL of the video.
(I)width Indicates the width in pixels of the rendered <video> element.

some examples of html

Example 1:

<video controls>

    <source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>

    <source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>

</video>

Example 2:

<video src="vid1.mp4"></video>

<video controls src="https://internationalyouthacuity.blogspot.com/short.mp4" preload="none"></video>

Example 3:

<video controls controlsList="nofullscreen nodownload" src="https://internationalyouthacuity.blogspot.com/short.mp4" preload="none"> </video>

Example 4:

<video controls src="https://internationalyouthacuity.blogspot.com/short.mp4#t=15,20" preload="metadata"> </video>

Example 5:

<video preload="metadata" controls src="https://internationalyouthacuity.blogspot.com/short2.webm" preload="metadata"> </video>

Example 6:

<video playsinline src="https://internationalyouthacuity.blogspot.com/short.mp4"> </video>

<video loop controls src="https://internationalyouthacuity.blogspot.com/short.mp4"></video>

<video muted controls src="https://internationalyouthacuity.blogspot.com/short.mp4"> </video>

Example 7:

<video controls="" preload="metadata" width="422" height="253">

    <source src="/static/the-web-is-always-changing.webm" type="video/webm">

    <track label="English subtitles" kind="subtitles" srclang="en" src="/static/the-web-is-always-changing.vtt" default="">

</video>

Example 8:

<video controls autoplay>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

Example 9:

 

Play videos according to time or hours or day.

function showElementAndPlayVideo(id) {

    const myElement = document.querySelector("#" + id);

    myElement.style.display = 'block'; 

    myFunctionToPlayVideo(id); 

}

function showElementAtTime(id, hour) {

    var now = new Date();

    var time = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hour, 0, 0, 0) - now;

    var timeEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hour, 59, 59, 0) - now;

    if(now >= time && now < timeEnd) { 

        showElementAndPlayVideo(id);

    } else if(time < now) { 

        setTimeout(() => showElementAndPlayVideo(id), now - time);

    }

}