Extension:TimedMediaHandler/VideoJS播放器

執行中的 VideoJS 播放器截圖

VideoJS Player是在各個維基媒體專案中針對MediaWiki的視訊播放器。

它基于VideoJS，具有现代、快速的使用者介面 ，并與移动设备和HTML5兼容。

用法

影片播放器範例

無字幕彈出視窗的音訊播放器範例

Example audio player with subtitles

同時提供音訊和視訊的播放器。 您可以在本頁面中找到這兩種播放器的範例。 啟動之後，您會看到與視訊互動時的控制列。

操控從左至右依序為：

•  播放/暫停控制
•  音量控制
• 播放進度條
• 剩餘播放時間
•  字幕語言選擇器和字幕樣式控制
•  畫質調整選單
•  可選的子母畫面切換鈕
•  全螢幕切換鈕
•  前往檔案描述頁的資訊鈕

滑鼠與鍵盤操作方式

• 点击缩略图上方的播放图标，即可开始播放该媒体文件。
• 右键或中键单击缩略图，即可打开文件说明页面
• 在播放器窗口内单击鼠标即可播放/暂停播放器
• 双击播放器窗口即可进入或退出全屏模式
• 可使用以下键盘控制键：

  k / Space

  Play/pause the media playback

  f

  進入/離開全螢幕

  m

  靜音

  c / s

  Toggle subtitles on / off

  < / >

  Decrease and increase playback speed

  ← / →

  Skip 5 seconds back / forward

  j / l

  Skip 10 seconds back / forward

  Home / End

  Skip to start / end of video

  , / .

  When paused, skip 1 frame back or forward

• 播放器可完全通过键盘操作，使用Tab键、回车键和空格键进行交互

已知問題

视频播放器仍在开发中，但若您发现任何问题，请在讨论页上报告，或在Phabricator中提出。

开发人员

開發人員在開發使用 Video.js 播放器的功能時，需要適當地初始化和設定它。 以下是典型的使用範例。

基本配置範例

此内容已过时，应重新进行调整，以使用我们的播放器封装组件，该组件会为视频JS播放应用统一的选项与设置。

// 第一个参数可以是字符串ID或<video>元素
var player = videojs( 'my-player-id', {
    controls: true,
    autoplay: false,
    poster: "https://path/to/poster/image"
    sources: [ /* 由不同大小和格式的源文件组成的数组 */ ]
} );

sources也可以在HTML ‎<video>元素中提供，而非在JavaScript中：

<video class="video-js">
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>