未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

Video タグの使い方

Video タグの使い方

タグの設置はこんな感じ

  <video  src="sampe.mp4" width="300" height="300" controls id="my-video"></video>

f:id:everydayProguramming:20201115110210p:plain

  • controls

これは再生ボタン、再生時間などを表示してくれるバーの事

  • play() pause()メソッド

下記のように、videoの要素を取得して、play() pause()が行える

  <div class="container">
    <section>
       <h2>audioタグ</h2>

       <video  src="./test.mp4" width="300" height="300" controls id="my-video"></video>
       <button id="stop">ストップ</button>

    </section>
  </div>
  
  <script>
    let vido = document.querySelector("#my-video")
    let stopbtn = document.querySelector("#stop")
    stopbtn.addEventListener("click", () => {
      vido.pause()
    })
  </script>