HTML Video Tag

Giriş

source Tag

video tag içinde <source...> tag bulunur. Açıklaması şöyle

Inside <video> tag you place <source> tag with two important attributes. The first one is src attribute used to point out video which we want to display. The second important field is type, responsible for keeping our video format 

You can also write some text inside <video> </video> tags and it will be used as fallback in browsers that do not support the element. As for now, even Internet Explorer supports it so this scenario is almost impossible.

Örnek

Şöyle yaparız. Burada source içinde video dosyası ve type içinde de mp4 olduğu belirtiliyor.

<video id="player"
       controls
       crossorigin
       playsinline
       data-poster="https://.../View_From_A_Blue_Moon_Trailer-HD.jpg>">
  <source src="https://.../View_From_A_Blue_Moon_Trailer-720p.mp4"
          type="video/mp4"/>
</video>

autoplay ve muted Alanı

Açıklaması şöyle

I have added autoplay and muted attributes for video to start playing automatically

I have added controls attribute to show embedded player controls

Örnek

Şöyle yaparız

<video width="1280" height="960" muted autoplay controls>
  <source src="http://localhost:8090/api/files/default" type="video/mp4">

  Update your browser to one from XXI century
</video>

Örnek

Şöyle yaparız. autoplay = "autoplay" yazmak ile sadece autoplay yazmak arasında fark var mı bilmiyorum

<video muted="muted" autoplay="autoplay" loop="loop" 
       src="/static/img/factory.mp4">
</video>

loop Alanı

Örnek
Şöyle yaparız

<video id="myVideo" width="100%" controls autoplay loop muted="muted">
  <source src="test.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Video bitince bir şey çalıştırmak için şöyle yaparız

document.getElementById('myVideo').addEventListener('ended',function() {
  ...
},false);