iT邦幫忙

2018 iT 邦幫忙鐵人賽
0
Modern Web

30天學習30套前端技術(2018年)系列 第 35

[十分鐘學習] Videos.js - HTML5影片播放器

example1

Video.js是隨著HTML5的來襲所打造的媒體播放器,支援HTML5和Flash影片,類似Youtube或Vimeo的插件,支援桌上型和行動裝置,這個專案從2010年開始,現在已經有超過40萬的網站使用它

GitHub Star: 18,000
Javascripting Overall: 97%
瀏覽器: ChromeFirefoxIE9+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

      <!-- Videos.js v5.19 -->
      <link href="htts://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
      <script src="htts://vjs.zencdn.net/5.19/video.min.js"></script>
    
  • npm

      $ npm install video.js
    
  • Bower

      $ bower install video.js
    

《範例》

  • 包含播放、暫停和靜音的播放器

      <!--
      	參數設定[註1]
      	autoplay: 自動播放
      	controls: 顯示控制器
      	poster: 預覽圖
      	preload: 設定預載入模式
      -->
      <video id="my-video" class="<video></video>-js" width="360" height="240" data-setup='{ "autoplay": true, "controls": true, "poster": "", "preload": "auto" }'>
      	<source src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4" type='video/mp4'>
      	<p class="vjs-no-js">
      		<!-- 如果使用者不支援JavaScript,顯示這段-->
      		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>
      <br />
      <button onclick="play()">Play</button>
      <button onclick="pause()">Pause</button>
      <button onclick="mute()">Mute</button>
      <script>
      	var videoPlayer = videojs( "my-video" );
      	function play()
      	{
      		videoPlayer.play(); // 播放
      	}
      	function pause()
      	{
      		videoPlayer.pause(); // 暫停
      	}
      	function mute()
      	{
      		videoPlayer.muted( true ); // 靜音
      	}
      </script>
    

    [註1]

    參數 描述
    autoplay 自動播放
    controls 顯示控制器
    poster 預覽圖
    preload 設定預載入模式

    函式列表

    函式 描述
    play() 播放
    pause() 暫停
    muted() 靜音

《延伸》

  1. Video.js: The Player Framework
  2. videojs/video.js: Video.js - open source HTML5 & Flash video player

上一篇
[十分鐘學習] three.js - 動畫繪製評價最高的神器
下一篇
[十分鐘學習] Leaflet - 全民地圖改造王
系列文
30天學習30套前端技術(2018年)61

1 則留言

【**此則訊息已被站方移除**】

我要留言

立即登入留言