web前端入门到实战：HTML5 视频流行插件之video.js

最新推荐文章于 2024-05-25 09:38:48 发布

白T恤架构师

最新推荐文章于 2024-05-25 09:38:48 发布

阅读量921

点赞数

本文链接：https://blog.csdn.net/ITHHH111/article/details/105636499

版权

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

（要支持ie低版本请下载5.4.3版）点击进入官网

下载地址：http://www.jq22.com/jquery-info404

也可以使用cdn

<link href="//cdn.bootcss.com/video.js/7.0.0-alpha.1/alt/video-js-cdn.css" rel="stylesheet">
<script src="//cdn.bootcss.com/video.js/7.0.0-alpha.1/video.min.js"></script>

首先给video标签加上 video-js 的类

data-setup="{ }" 使控件样式发生改变

专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video class="video-js" controls data-setup="{}" width="960" height="400">
        <source src="data/imooc.mp4"></source>
    </video>

    <script src="video.min.js"></script>
</body>
</html>

vjs-big-play-centered 类，控制按钮居中显示


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video class="video-js vjs-big-play-centered" controls data-setup="{}" width="960" height="400">
        <source src="data/imooc.mp4"></source>
    </video>

    <script src="video.min.js"></script>
</body>
</html>

preload=“auto” 预加载

线上观看时比较直观


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video class="video-js vjs-big-play-centered

最低0.47元/天解锁文章

白T恤架构师

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端入门到实战：HTML5 视频流行插件之video.js

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。（要支持ie低版本请下载5.4.3版）点击进入官网下载地址：http://www.jq22.com/jquery-info404也可以使用cdn<link href="//cdn.bootcs...
复制链接

扫一扫