当前位置 博文首页 > leslie lee的博客（python ansys）：HTML5 Video Programming
推荐歌曲：流浪花——蒙面ken歌，与吕方比起来唱的也不错，很好听
视频学习地址：https://www.youtube.com/playlist?list=PLSkTiyK6-uFd85cPVw6RcXn9MFNwms6L3
video.js就是一个javascript视频库
官网：https://videojs.com/ https://videojs.com/getting-started
github：https://github.com/videojs/video.js
video.js插件
官网：https://videojs.com/plugins
github：https://github.com/videojs/video.js/wiki/Plugins
一个运行html文件的环境，好比py文件需要python环境
npm：node.js的包管理器
cd跳转到工作目录
npm install package安装js包
对于videojs-playlist这个包，我之前以为直接去github里面复制一下就好了，但没想到与官网的不一样，通过官网提供的github进去又找不到videojs-playlist.js，因此只好用npm安装。
<script src="path/to/videojs-playlist/dist/videojs-playlist.js"></script>
根据官网的提示在dist文件夹中找到video-playlist.js，复制到工作文件夹即可
有很多视频包，比如video.js，plyr.js等，不用这些也可以播放视频。但视频包里面有很多现成功能可以直接用，而且好看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>video programming</title>
</head>
<body>
<video width="320" height="240" autoplay muted controls>
<source src="国产凌凌漆.mkv" type="video/webm" />
Your browser does not support video tag
</video>
</body>
</html>
在console中可以执行以下命令：
video = document.querySelector(‘video’);
video.play();
video.playbackRate=5.0; 快进5倍速
video.pause();
video.currentTime; 当前播放进度的时间 秒
video.currentTime=10; 将播放进度时间设为10s
video.volume = 0.5;
video.js提供cdn链接，因此只需复制链接地址即可，而不需要将整个js文件都复制过来。
通过cdn链接使用video.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>video programming</title>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
</head>
<body>
<video
id="my-video"
class="video-js"
muted controls
poster="Money.jpg"
data-setup="{}"
>
<source src="国产凌凌漆.mkv" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
</body>
</html>
添加class=“video-js vjs-big-play-centered”，则播放按钮置于中间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>video programming</title>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
</head>
<body>
<video
id="my-video"
class="video-js vjs-big-play-centered"
muted controls
poster="Money.jpg"
data-setup="{}"
>
<source src="国产凌凌漆.mkv" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
</body>
</html>
在console中可以执行以下命令：
var video = videojs(‘my-video’); 通过id选择
video.play();
以及前面的暂停、播放速率等等
增加快进按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>video programming</title>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
</head>
<body>
<video
id="my-video"
class="video-js vjs-big-play-centered"
data-setup="{}"
>
<source src="国产凌凌漆.mkv" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
<script type="text/javascript" src="video-player.js"></script>
</body>
</html>
video-player.js
var player = videojs('my-video',{
autoplay:'muted',
controls:true,
poster:"Money.jpg",
loop:true,
fluid:true,
aspectRatio:'4:3',
playbackRates:[0.25,0.5,1,1.5,2,2.5,3,3.5,4],
userActions:{
hotkeys:true
}
});
添加插件hotkeys.js，增加数字操纵快进功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>video programming</title>
