原生js Html + video js 自定义视频播放器

HTML+video.js：创建互动视频播放器实例

最新推荐文章于 2025-08-14 14:27:33 发布

原创

最新推荐文章于 2025-08-14 14:27:33 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #html

在这里插入图片描述

创建一个html 引入video.js CDN

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

HTML 部分 (下边js部分效果需要最少两个Video 标签视频)

<video
    id="my-video"
    class="video-js vjs-big-play-centered"
    controls
    preload="auto"
    width="600"
    height="300"
    poster="./img/banner_1.jpg"
    data-setup="{}"
  >
    <source src="https://ypy48001.baomihua.com/d93b00adaf88972f3d1db8bd814cb528/60614D60/3564/35637193_9_4e9d4684174b11e59a92003048cc631a.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" /&