Live Web Week01

<video> Tag Self-portrait
Self-Portrait

&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;
    &amp;lt;head&amp;gt;
        &amp;lt;meta charset="utf-8"&amp;gt;
        &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&amp;gt;
        &amp;lt;title&amp;gt;interactive self portrait&amp;lt;/title&amp;gt;

    &amp;lt;/head&amp;gt;
    &amp;lt;body&amp;gt;
         
&amp;lt;div style="text-align:center"&amp;gt;
            &amp;lt;video id="videoYas" autoplay preload muted height="400" src="yes.mov" type="video/mp4" loop style="position: absolute; left: 500px; z-index:2;"&amp;gt;&amp;lt;/video&amp;gt;
            &amp;lt;video id="videoNan" autoplay preload muted height="400" src="no.mov" type="video/mp4" loop style="position: absolute; left: 500px; z-index:1;"&amp;gt;&amp;lt;/video&amp;gt;
        &amp;lt;/div&amp;gt;


        
&amp;lt;div style="text-align:center; position: absolute; top:500px; left: 750px;" &amp;gt;
            &amp;lt;button onclick="showYas()"&amp;gt;Yasss&amp;lt;/button&amp;gt;
            &amp;lt;button onclick="showNan()"&amp;gt;NaN&amp;lt;/button&amp;gt;
        &amp;lt;/div&amp;gt;

    &amp;lt;/body&amp;gt;
    &amp;lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20function%20showYas()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById('videoYas').setAttribute('style'%2C'position%3A%20absolute%3B%20%20left%3A%20500px%3B%20z-index%3A3')%0A%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById('videoNan').setAttribute('style'%2C'position%3A%20absolute%3B%20%20left%3A%20500px%3B%20z-index%3A1')%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20function%20showNan()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById('videoYas').setAttribute('style'%2C'position%3A%20absolute%3B%20%20left%3A%20500px%3B%20z-index%3A1')%0A%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById('videoNan').setAttribute('style'%2C'position%3A%20absolute%3B%20%20left%3A%20500px%3B%20z-index%3A3')%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;amp;lt;script&amp;amp;gt;" title="&amp;amp;lt;script&amp;amp;gt;" /&amp;gt;

&amp;lt;/html&amp;gt;

Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Live / Synchronous Website-Twitch
Twitch is a online live broadcast platform. Most of its user are game player and they watch some pro gamers playing game while they can text to the broadcaster or people who also watch the same live broadcast.