深入了解videojs

Video.js是一個開源的HTML5媒體播放器框架，它是由視頻專業公司Brightcove開發的。Video.js能夠適應不同的瀏覽器和設備，允許用戶利用HTML5的視頻功能而無需使用Flash。本文將從不同的方面詳細介紹Video.js。

一、視頻播放

Video.js最突出的特點就是提供了一款先進的視頻播放器，它提供了很多基於JavaScript的選項，可以創建無縫嵌入和兼容HTML5的媒體體驗。下面是一個視頻播放器的示例：


<video id="my-player" class="video-js vjs-default-skin" controls preload="auto"
    data-setup='{ "techOrder": ["html5", "flash"] }'>
    <source src="my-video.mp4" type="video/mp4">
    <source src="my-video.webm" type="video/webm">
    <p class="vjs-no-js">
        為了獲得更好的體驗，請啟用JavaScript或者升級您的瀏覽器。
    </p>
</video>

在Video.js中，可以通過data-setup來自定義播放器的選項。如上代碼所示，該示例設置了視頻文件和一些特定的控制按鈕（如播放，暫停，停止等）。

此外，Video.js還提供了其他很多的API，開發者可以根據需要自行編寫JavaScript代碼。

二、插件

Video.js支持各種插件的擴展，這意味着你可以根據需要添加新的功能。常用的插件包括字幕、廣告、分段、畫中畫等等。下面是一個添加字幕插件的示例：


<!DOCTYPE html>
<html>
  <head>
    <title>VideoJS Subtitle Plugin Example Video</title>
    <link href="//vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet" />
    <script src="//vjs.zencdn.net/7.8.2/video.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.1/Youtube.min.js"></script>
    <link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link href='../css/videojs-subtitle.css' rel='stylesheet' type='text/css'>
    <script src="../js/subtitle.js"></script>
  </head>
  <body>
    <video id='my-video' class='video-js vjs-default-skin'>
      <source src='http://vjs.zencdn.net/v/oceans.mp4' type='video/mp4'>
    </video>
  </body>
  <script>
    videojs('my-video', {
      plugins: {
        subtitle: {
          url: '../subtitles/oceans.srt',
        },
      },
    });
  </script>
</html>

在上述示例中，我們添加了VideoJS Subtitle插件。通過指定字幕文件的URL，VideoJSSubtitle插件可以在視頻播放器中添加字幕。VideoJS還提供了很多其他的插件庫，可以根據需要自行添加。

三、樣式

Video.js允許開發者根據需要自定義樣式。默認情況下，Video.js提供了一些樣式，但開發者可以自行創建自己的樣式庫。下面是一個自定義樣式的示例：


.video-js.vjs-default-skin.vjs-big-play-centered {
  margin-bottom: 20px;
}

.video-js .vjs-control-bar {
  background-color: #2B2E33;
  background-image: none;
  height: 35px;
  border-color: rgba(0, 0, 0, 0.6);
}

.video-js .vjs-volume-menu-button .vjs-menu-content {
  margin-top: 3px;
  margin-left: -45px;
  border-radius: 5px;
}

在上述示例中，我們自定義了視頻播放器中「播放」按鈕的樣式、進度條的顏色及樣式、音量按鈕的樣式。

四、移動支持

Video.js基於HTML5的視頻技術，能夠適應不同的設備，包括桌面電腦、平板電腦和手機。適配不同設備的關鍵在於使用不同的媒體源。Video.js內置了一些流媒體服務器，如Brightcove和Akamai，以及三方媒體庫，如YouTube和Vimeo等，因此可以適應不同的設備和媒體資源。

下面是一個在小屏幕上播放視頻的示例：


<!DOCTYPE html>
<html>
  <head>
    <title>Videojs Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../video-js.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/4.11/video.js"></script>
  </head>
  <body>
    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto"
    poster="http://vjs.zencdn.net/v/oceans.png"
    data-setup='{"width":640,"height":264}'>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
      <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
      <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg'>
      <p class="vjs-no-js">
        為了獲得更好的體驗，請啟用JavaScript或者升級您的瀏覽器。
        <br>
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
      </p>
    </video>
  </body>
</html>

在上述示例中，播放器會根據屏幕大小自動調整布局，以適應不同設備和屏幕大小。

五、總結

本文詳細介紹了Video.js的一些關鍵特性。Video.js不僅提供了先進的視頻播放器，還能夠方便地添加插件、自定義樣式以及適應不同的設備。如果你正在尋找一款功能強大的HTML5媒體播放器，Video.js會是一個很好的選擇。

原創文章，作者：UIPYN，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/334489.html