HTML5实现视频播放功能按钮代码

涛哥
PHP代码

以下是一个基本的 HTML5 视频播放器功能按钮代码的示例，这段代码包括一个 video 元素，该元素嵌入了一个 MP4 和一个 WebM 视频文件，并且四个功能按钮用于播放/暂停、放大、缩小和恢复默认大小的视频。当用户单击这些按钮时，将调用 JavaScript 函数来实现相应的操作。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Video Player</title>
  </head>
  <body>
    <video id="myVideo" width="640" height="360">
      <source src="myVideo.mp4" type="video/mp4">
      <source src="myVideo.webm" type="video/webm">
    </video>

    <div>
      <button onclick="playPause()">Play/Pause</button>
      <button onclick="makeBig()">Big</button>
      <button onclick="makeSmall()">Small</button>
      <button onclick="makeNormal()">Normal</button>
    </div>

    <script>
      var vid = document.getElementById("myVideo");

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

      function makeBig() {
        vid.width = 960;
        vid.height = 540;
      }

      function makeSmall() {
        vid.width = 320;
        vid.height = 180;
      }

      function makeNormal() {
        vid.width = 640;
        vid.height = 360;
      }
    </script>
  </body>
</html>

注意，这只是一个基本的示例。如果您需要更多的功能，例如自定义控件、视频标题、字幕等等，可以使用 HTML5 视频播放器库或框架来扩展视频播放器。

猜你喜欢：php实现音乐播放器搜索功能代码

 
  • 搜索功能
  • 播放器