VideoJs的简单使用

冷不防 2023-07-22 13:26 31阅读 0赞

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

[官方下载video.js][video.js]，详细API请参考[官网][Link 1]

引入css和js，创建Demo：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>videojs视频播放DEMO</title>
      </head>
      
      <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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1eGllbGVh_size_16_color_FFFFFF_t_70]

[video.js]: https://github.com/videojs/video.js
[Link 1]: https://videojs.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1eGllbGVh_size_16_color_FFFFFF_t_70]: /images/20230528/bb20c58edb8840abb0b6bb6d8a4cfe46.png

发表评论取消回复

表情：

评论列表（有 0 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读

相关 video-04-videojs配置及使用

> videojs是一种轻框架，可以帮我们快速开发一个video视频组件目录一、参考资料二、引入videojs 三、简单了解使用四、配置项和事件 4.1

￡神魔★判官ぃ/ 2023年10月13日 07:57/ 0 赞/ 45 阅读

相关 VideoJs的简单使用

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

冷不防/ 2023年07月22日 13:26/ 0 赞/ 32 阅读

相关 web视频播放器videojs

VideoJS 下载 Video.js CDN npm安装创建播放器设置自动设置手动设置

￡神魔★判官ぃ/ 2022年09月05日 12:39/ 0 赞/ 349 阅读

相关 videojs动态设置sources

var player; $(document).ready(function() { player = videojs('my_video_

柔情只为你懂/ 2022年04月14日 03:11/ 0 赞/ 687 阅读

相关 VideoJs使用总结

VideoJs简介 VideoJs是用于视频播放的javascript的库。 [官方文档][Link 1] 使用方法 <div class="video

偏执的太偏执、/ 2022年03月02日 05:10/ 0 赞/ 880 阅读

相关 videoJs播放视频

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

约定不等于承诺〃/ 2022年02月14日 02:55/ 0 赞/ 560 阅读

相关 videojs坑

data-setup="\{ 'html5' : \{ 'nativeTextTracks' : false \} \}"会报错！！！！ data-setup='\{ "ht

蔚落/ 2021年12月11日 07:04/ 0 赞/ 414 阅读

相关 videojs

转自：[https://www.awaimai.com/2053.html][https_www.awaimai.com_2053.html] 1 初始化

柔情只为你懂/ 2021年12月11日 06:31/ 0 赞/ 396 阅读

相关 videojs中文文档详解

[https://blog.csdn.net/a0405221/article/details/80923090][https_blog.csdn.net_a0405221_a

小咪咪/ 2021年11月22日 08:31/ 0 赞/ 1126 阅读

相关 videojs中文文档详解

入门使用引入`video.js`和`video-js.css` <link href="https://cdnjs.cloudflare.com/ajax/l

痛定思痛。/ 2021年06月26日 16:06/ 0 赞/ 1443 阅读