Wikimore

Category:Pages using deprecated NoteTA template#%20

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

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

用法

影片播放器範例

音樂播放器範例

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

操控從左至右依序為：

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

滑鼠與鍵盤操作方式

Click the play icon above the thumbnail to begin playback of the media file.
Right click or middle click the thumbnail to open the file description page
Play/Pause the player with a single mouse click inside the player window
Double click the player window to enter or leave fullscreen mode
The following keyboard controls are available:
k / 空白鍵
Play/pause the media playback

f鍵
進入/離開全螢幕

m鍵
靜音
The player is fully keyboard accessible using tab, enter and spacebar keys

已知問題

有些檔案的字幕會失效。我们於2022年放弃了在字幕中对wikicode标记的支持，因此建议您重写这些字幕(T224258)。
當有轉錄時，音訊會開啟對話框，而不是內嵌顯示。這是一項特意的變更，將來可讓我們顯示音訊的轉錄內容。请参见T246035。

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

开发人员

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

基本配置範例

This is outdated and should be reworked to make use of our player wrappers, which apply consistent options and settings for videojs playback.

// The first argument can be a string ID or a <video> element
var player = videojs( 'my-player-id', {
    controls: true,
    autoplay: false,
    poster: "https://path/to/poster/image"
    sources: [ /* array of source files in various sizes and formats */ ]
} );

The sources can also be provided in the HTML ‎<video> element instead of in JS:

<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>

Advanced configuration with Ogv.js support

If you need cross-platform playback of OGG or WebM files (many files in Commons are in these formats), you can use the Ogv.js plugin for Video.js, which is also included in TimedMediaHandler. Example configuration:

var player;

// Load the appropriate modules in ResourceLoader
mw.loader.using( 'ext.tmh.videojs-ogvjs' ).then( function () {
    // Load ogvjs if necessary; when this promise resolves,
    // all necessary code has been loaded
    return mw.OgvJsSupport.loadIfNeeded();
} ).then( function () {
    player = videojs( 'my-player-id', {
        controls: true,
        autoplay: false,
        poster: 'https://path/to/my/image',
        sources: [ /* array of sources */ ],
        
        // Ogv.js-specific configuration
        ogvjs: {
            base: mw.OgvJsSupport.basePath()
        }
    } );
} );