videojs教程

milijiangjun

于 2020-09-19 14:18:47 发布

阅读量1k

点赞数

分类专栏：声明

本文链接：https://blog.csdn.net/milijiangjun/article/details/108680411

版权

https://videojs.com/ 官网
https://github.com/videojs
下载地址
https://github.com/videojs/video.js github 下载地址

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

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

<!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" controls data-setup="{}" width="960" height="400" preload="auto">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
</body>
</html>

poster=" " 设置封面图

<!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="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
</body>
</html>

videojs是封装好的方法

.ready 表示视频已就绪，类似于 canplay（其实完全不如canplay，下面案例有体现）

.currentTime() 当前时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");
        myvideo.ready(function(

最低0.47元/天解锁文章

milijiangjun

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
videojs教程

https://videojs.com/ 官网https://github.com/videojs下载地址https://github.com/videojs/video.js github 下载地址首先给video标签加上 video-js 的类data-setup="{ }" 使控件样式发生改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫