iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 35
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 則留言

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

我要留言

立即登入留言