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