videojs 播放m3u8

作者：′残花败落° 发布日期:2025-05-07 浏览:39

<!DOCTYPE html>
<html>
<head>
  <title>Video.js 播放 M3U8</title>
  <link href="https://vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls/dist/videojs-contrib-hls.min.js"></script>
</head>
<body>
  <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
    <source src="your-m3u8-file-url.m3u8" type="application/x-mpegURL">
    Your browser does not support HTML5 video.
  </video>

  <script>
    var player = videojs('my-video');
    player.play();
  </script>
</body>
</html>

解释说明：

引入 Video.js 和 HLS 插件：首先，我们需要引入 video.js 的 CSS 和 JS 文件，以及 videojs-contrib-hls 插件来支持播放 M3U8 格式的视频。
创建视频元素：在 HTML 中创建一个 <video> 元素，并设置其 ID、类名、控件属性等。其中，<source> 标签用于指定视频源文件的 URL 和类型（M3U8）。
初始化播放器：通过 JavaScript 初始化 Video.js 播放器，并调用 player.play() 方法开始播放视频。

请将 your-m3u8-file-url.m3u8 替换为实际的 M3U8 文件 URL。

上一篇：js 本地缓存

下一篇：js 保存图片