ryoakg
1/28/2017 - 12:56 PM

video-tag.html

video-tag.html
content_copyfile_download
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>video tag</title>
    <style>
     .video-list{
       list-style:none;
     }
     .video-item{
       display:inline-block;
       margin-bottom: 10px;
     }
     video{
       width:300px;
       display:block;
     }
    </style>
  </head>
  <body>
    <!-- todo: JS manipulation http://www.htmq.com/video/ -->
    video resources from
    <ul>
      <li><a href="http://www.coverr.co/">COVERR</a></li>
      <li><a href="https://archive.org/details/opensource_movies">Community Video | Internet Archive</a></li>
    </ul>

    <ul class="video-list">
      <li class="video-item">
        <video autoplay src="https://s3-us-west-2.amazonaws.com/coverr/mp4/The-Launch.mp4">
          Your browser does not support the video tag.
        </video>
        autoplay
      </li>

      <li class="video-item">
        <video loop src="https://s3-us-west-2.amazonaws.com/coverr/mp4/The-Launch.mp4">
          Your browser does not support the video tag.
        </video>
        loop
      </li>

      <li class="video-item">
        <video autoplay loop src="https://s3-us-west-2.amazonaws.com/coverr/mp4/The-Launch.mp4">
          Your browser does not support the video tag.
        </video>
        autoplay + loop
      </li>

      <li class="video-item">
        <video controls src="https://s3-us-west-2.amazonaws.com/coverr/mp4/The-Launch.mp4">
          Your browser does not support the video tag.
        </video>
        controls
      </li>

      <li class="video-item">
        <video poster="https://s3-us-west-2.amazonaws.com/coverr/poster/The-Launch_thumb.jpg" src="https://s3-us-west-2.amazonaws.com/coverr/mp4/The-Launch.mp4">
          Your browser does not support the video tag.
        </video>
        poster
      </li>

      <li class="video-item">
        <video muted autoplay src="https://archive.org/download/Bets10YeniSezonVideo/Bets10%20Yeni%20Sezon%20Video.mp4">
          Your browser does not support the video tag.
        </video>
        muted + autoplay
      </li>

      <li class="video-item">
        <video src="https://archive.org/download/Bets10YeniSezonVideo/Bets10%20Yeni%20Sezon%20Video.mp4">
          Your browser does not support the video tag.
        </video>
        not muted
      </li>

      <li class="video-item">
        <video>
          <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/coverr/mp4/The-Launch.mp4">
          Your browser does not support the video tag.
        </video>
        with &lt;source&gt;
      </li>

      <li class="video-item">
        <video>
          <source type="video/mp4" src="none.mp4">
          <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Desert-Mode.mp4">
          <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/coverr/mp4/The-Launch.mp4">
          Your browser does not support the video tag.
        </video>
        with multiple &lt;source&gt;s
      </li>
    </ul>
  </body>
</html>