videojs使用详解

Posted 杰之行

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了videojs使用详解相关的知识,希望对你有一定的参考价值。

前言

1. VIDEO JS概述

  • Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 html5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。它支持在桌面和移动设备上播放视频。该项目于2010年年中启动,目前已有数百名贡献者,在超过45万个网站上使用
  • videojs官网:https://videojs.com/
  • 视频播放器,播放H5;不支持H5的话就自动切换到flash
  • 可以播放video,也可以支持流媒体HLS。video.js与HTML5的对比,如下图:

总的来说,Video.js相比HTML5原生的video标签视频播放,有以下几个优点:

  • 有良好的跨浏览器的样式,更美观
  • 支持流媒体格式
  • 支持社交媒体平台,例如Youtube,Vimeo等
  • 有丰富的第三方插件
  • 没有浏览器兼容问题

2. 基本使用

2.1 首先在head标签中引入video.js的样式文件

<head>
  <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

2.2 在body中添加video标签

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup=""
  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" 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.17.0/video.min.js"></script>
</body>

3. 引入Video.js需要的文件,至此,便实现了使用Video.js来播放视频。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入videojs样式文件 -->
    <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />

    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
    <!-- 2.添加video标签 -->
    <!-- vjs-big-play-centered可使大的播放按钮居中,vjs-fluid可使视频占满容器 -->
    <video 
	    id="my-video" 
	    class="video-js vjs-big-play-centered" 
	    controls 
	    preload="auto" 
	    width="640" 
	    height="264" 
	    poster="./assets/images/poster.jpeg" 
	    data-setup=""
    >
        <source src="./assets/videos/output.mp4" type="video/mp4" />
    </video>

    <!-- 3.引入video.js库文件 -->
    <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>

</body>

</html>
  • 在对应文件夹中播放设置自己的媒体文件,即可完成播放。

后记

  • 简单的使用videojs到此为止。

以上是关于videojs使用详解的主要内容,如果未能解决你的问题,请参考以下文章

Videojs视频插件在React中的应用

阿里云实践 - HTML5断点播放m3u8视频(videojs)

从 videoJS 显示视频时长

Firefox 冻结的 HTML5 视频不会降级为 Flash

VideoJS - 无缝循环视频

免费视频播放器videojs中文教程