轻松搞定视频在线播放！

发布日期: 2022-03-31

大家好，我是可爱又机灵的开源小妹。今天给大家介绍一款超轻量级中文ocr的开源项目，video.js。

介绍

video.js 是一款为 HTML5 打造的网络视频播放器。它支持 HTML5 和 Flash 视频，以及 YouTube 和 Vimeo（通过插件）。它支持在台式机和移动设备上播放视频。该项目于 2010 年年中启动，目前已在超过 50000 个网站上使用该播放器。

简单使用

首先在页面中引入所需的 js 文件和样式，当然也可以通过npm进行操作，我们就直接在页面上引入文件来实现。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
		<script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
	</head>
	<body>
		<video
		    id="my-video"
		    class="video-js"
		    controls
		    preload="auto"
		    width="640"
		    height="264"
		    poster="MY_VIDEO_POSTER.jpg"
		    data-setup="{}"
		  >
		    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
		  </video>
	</body>
</html>

运行效果如下：

但是按钮竟让没有居中属实有点丑了，别慌，在 video 标签上增加类”vjs-big-play-centered“即可。
但是一开始看到的视频画面是黑乎乎的一片，是否可以设置封面图呢？
通过 poster 进行性设置。
设置以上两种属性之后运行效果如下：

使用起来什方便，就简单几行代码就搞定了视频播放器，当然除了上面介绍的简单使用，在日常开发中还有一些额外的场景，例如获取视频的总时间等。这个时候则需要写一部分代码了如下：

var myvideo=videojs("myvideo");
myvideo.ready(function(){
    console.log("已就绪");
});
onclick=function(){
     //获取总时间
    console.log(myvideo.duration());
}