VideoJs的简单使用

最新推荐文章于 2024-05-26 13:03:47 发布

Stackflowed

最新推荐文章于 2024-05-26 13:03:47 发布

阅读量682

点赞数

分类专栏： # VideoJs 文章标签： js

本文链接：https://blog.csdn.net/yuxielea/article/details/105338552

版权

VideoJs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

官方下载video.js，详细API请参考官网

引入css和js，创建Demo：

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

在这里插入图片描述

Stackflowed

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VideoJs的简单使用

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。官方下载video.js引入css和js，创建Demo：<!DOCTYPE html><html lang="en"> <head> <meta cha...
复制链接

扫一扫