video.js视频播放功能

船长在船上

已于 2022-04-16 00:37:45 修改

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发 javascript H5播放video 文章标签： vue

于 2020-08-27 15:29:54 首次发布

本文链接：https://blog.youkuaiyun.com/SmartJunTao/article/details/108261743

前端开发同时被 3 个专栏收录

140 篇文章

订阅专栏

javascript

66 篇文章

订阅专栏

H5播放video

1 篇文章

订阅专栏

本文详细介绍了如何使用video.js库创建视频播放器。通过引入CDN链接，设置基本属性如预加载、封面图及视频源，配合JavaScript初始化播放器并进行配置，实现了一个基本的视频播放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档：video.js

各个版本下载：video.js版本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>videojs视频播放</title>
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<body>
  <h3>视频播放</h3>
  <video id="example_video" class="video-js vjs-default-skin" controls preload="none" poster="http://vjs.zencdn.net/v/oceans.png">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  </video>
</body>
</html>
<script>
  var player = videojs('example_video', {
    muted: true,
    controls: true,
    height: 300,
    width: 400,
    loop: true,
    // 更多配置.....
  });
</script>