HTML5 Video

DOCTYPE html>
<html>
  <head>
    <meta charset="rutf-8">
  head>
  <body>
    <div class="container">
      
      <video src="/images/movie.mp4" width="320" height="240" muted autoplay>video>
      <video src="/images/movie.mp4" controls autoplay width="320" height="240">video>
      <video controls width="320" height="240">
        <source src="/images/movie.mp4" />
        <source src="/images/movie.ogg" />
        您的浏览器不支持 HTML5 video 标签。
      video>
      <div class="player">
        <video id="video" width="320">
          <source src="/images/1.mp4" />
          <source src="/images/1.ogg" />
          您的浏览器不支持 HTML5 video 标签。
        video>
        <div>
          <button onclick="playPause()">播放/暂停button>
          <button onclick="zoomIn()">放大button>
          <button onclick="zoomOut()">缩小button>
          <button onclick="fullScreen()">全屏button>
          <button onclick="addNewTextTrack()" type="button">添加一个新的文本轨道:button>
        div>
      div>
    div>
  body>
html>

<script>
  let video = document.getElementById('video')
  let zoomList = [0.5, 0.8, 1, 1.2, 1.5, 2]
  let currentIndex = 2

  function playPause () {
    if (video.paused) {
      video.play()
    } else {
      video.pause()
    }
  }

  function zoomIn () {
    if (currentIndex < zoomList.length - 1) {
      currentIndex++
      video.width = 320 * zoomList[currentIndex]
    }
  }

  function zoomOut () {
    if (currentIndex > 0) {
      currentIndex--
      video.width = 320 * zoomList[currentIndex]
    }
  }

  function fullScreen () {
    if(video.requestFullScreen) {
        video.requestFullScreen(); 
    } else if(video.mozRequestFullScreen) {
        video.mozRequestFullScreen(); 
    } else if(video.webkitRequestFullScreen) {
        video.webkitRequestFullScreen(); 
    }
  }

  // 添加文本轨道
  function addNewTextTrack() { 
    let captionTrack = video.addTextTrack("captions")
    captionTrack.mode = "showing"
    let cue1 = new VTTCue(0, 2, "你好!")
    captionTrack.addCue(cue1)
    let cue2 = new VTTCue(0, 2, "hello!")
    captionTrack.addCue(cue2)
    let cue3 = new VTTCue(2, 4, "我叫夏鑫!")
    captionTrack.addCue(cue3)
    let cue4 = new VTTCue(2, 4, "My name is xiaxin!")
    captionTrack.addCue(cue4)
  }
script>

<style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html, body {
    width: 100%;
    height: 100%;
  }
  .container {
    width: 100%;
    height: 100%;
    padding: 10px;
  }
style>

你可能感兴趣的:(html5,前端,html)