HTMLVideoElement接口的属性和方法(附模态框测试)

HHaidemo2 月前 01127

HTMLVideoElement 接口提供了用于操作视频对象的特殊属性和方法。它同时还继承了HTMLMediaElement 和 HTMLElement 的属性与方法。

在不同浏览器中支持的媒体格式 (en-US) 是不一样的。因此在提供媒体文件的时候，或者提供一种所有浏览器都支持的格式，或者提供格式不同的多个视频源来支持不同浏览器，保证你想要支持的浏览器都能够播放。

属性

继承了其父对象 HTMLMediaElement 和 HTMLElement 的属性。

<video
  id="media"
  src="https://example.com/video.mp4"
  poster="https://example.com/poster.jpg">
</video>
const el = document.getElementById("media");
console.log(el.poster); // Output: "https://example.com/poster.jpg"

`getElementById 示例`

<html lang="zh">
  <head>
    <title>getElementById 示例</title>
  </head>
  <body>
    <p id="para">这里有一些文本</p>
    <button onclick="changeColor('blue');">蓝色</button>
    <button onclick="changeColor('red');">红色</button>
    <script>
    function changeColor(newColor) {
      const elem = document.getElementById("para");
      elem.style.color = newColor;
    }
    </script>
  </body>
</html>