資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在Android上設定video.js播放器？
在本教程中，我們將學習如何在Android裝置上設定video.js播放器。Video.js是一個網頁影片播放器庫，用於建立現代化的影片播放器。Video.js的一大優點是它支援各種顯示尺寸，例如桌上型電腦、筆記型電腦、移動裝置等。此外，它還支援多種影片格式，無論是標準格式還是現代格式，例如mp4、Flv、YouTube等。
在本教程中，我們將學習如何在Android裝置上設定video.js播放器。有時，使用video.js建立的影片播放器在Android手機上無法正常工作，或者video.js控制元件在Android裝置上無法顯示。現在，讓我們繼續本教程的下一部分，瞭解如何使用video.js在Android中正確設定影片播放器。
在Android中設定Video.js播放器
Android是一個非常流行的開源移動作業系統，基於修改後的Linux核心。它主要用於帶有觸控式螢幕的移動裝置，例如智慧手機和平板電腦。自2011年以來，Android一直是最暢銷的作業系統，月活躍使用者超過30億。
使用video.js建立的影片播放器可以在Android瀏覽器或應用程式中正常工作，無需太多麻煩。但有時，video.js播放器的自定義控制元件不會在移動裝置上顯示，而Android的原生控制元件會接管。
在使用video.js在Android中設定影片播放器時，我們需要確保顯示自定義video.js控制元件，而不是Android的原生控制元件。為此，我們有兩種方法：
使用“data-setup”屬性設定自定義Android控制元件
使用JS動態設定自定義Android控制元件
讓我們深入瞭解每種方法：
使用“data-setup”屬性設定自定義Android控制元件
前提條件 - 假設您知道如何使用video.js庫建立基本的影片播放器。
為了在移動裝置上設定自定義控制元件，我們需要在使用“data-setup”屬性的影片標籤中將“customControlsOnMobile”選項引用設定為true。
此外，我們需要確保觸控式螢幕裝置的原生Android或移動控制元件不會顯示在我們的自定義video.js控制元件的位置。因此，為了停用移動裝置的原生觸控控制元件，我們將“nativeControlsForTouch”選項引用設定為false，同樣在<video>元素的“data-setup”屬性中。
請考慮以下程式碼片段，用於在Android中設定帶有自定義video.js控制元件的影片播放器：
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
controls="true"
fluid="true"
muted="true"
autoplay="true"
poster="assets/sample.png"
data-setup='{ "customControlsOnMobile": true, "nativeControlsForTouch": false }'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
在上面的程式碼片段中，我們在<video>元素的“data-setup”屬性中使用了“customControlsOnMobile”和“nativeControlsForTouch”選項引用。“customControlsOnMobile”選項的值設定為true，以確保即使在移動顯示屏上也顯示我們的自定義video.js控制元件，而“nativeControlsForTouch”選項設定為false，因此Android的原生控制元件不會接管我們的影片播放器。
注意 - 由於data-setup屬性接受JSON物件，請確保在data-setup屬性中傳遞有效的JSON字串，否則程式碼將無法正確執行。
示例1
在Android中設定帶有自定義video.js控制元件的video.js播放器的完整示例：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Player in Android Example</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
controls="true"
fluid="true"
muted="true"
autoplay="true"
poster=" https://tutorialspoint.tw/videos/sample.png"
data-setup='{ "customControlsOnMobile": true, "nativeControlsForTouch": false }'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
const player = videojs('my-video-player');
</script>
</body>
</html>
在這個程式碼示例中，我們實現了以下內容：
首先，我們使用video.js的免費CDN URL在程式碼的<head>部分匯入video.js所需的CSS和JS檔案。
此外，我們在程式碼的<body>部分建立了一個<video>元素。<video>元素已初始化為video.js、video-default-skin和vjs-big-play-centered等類。
video元素的“id”（即“my-video-player”）稍後在程式碼的<script>部分中用於為此id建立影片播放器。
我們還使用了<video>元素的一些標準HTML影片選項，例如controls、muted和poster，並使用了fluid屬性來使影片播放器具有響應性。
對於源，我們使用了一個mp4影片，我們在源標籤中將其mime型別指定為video/mp4。
在<script>標籤中，影片播放器已為id為“my-video-player”的<video>元素初始化。
在<video>標籤的“data-setup”屬性中，我們將“customControlsOnMobile”選項設定為true，並將“nativeControlsForTouch”選項引用值設定為false。
當上述程式碼在Android瀏覽器中執行時，將建立一個video.js播放器，並且它將具有自定義video.js控制元件。
因此，我們學習了使用video.js控制元件在Android中建立影片播放器的第一種方法，讓我們繼續本教程的後續部分，瞭解另一種實現相同目標的方法。
使用JS動態設定自定義Android控制元件
在本教程的這一部分中，我們將學習如何使用video.js動態啟用移動裝置的自定義控制元件，並停用Android影片播放器的原生觸控控制元件。
首先，我們需要在JavaScript中建立一個JSON物件，該物件將包含“nativeControlsForTouch”的值為false（布林值），“customControlsOnMobile”的值為true（布林值），然後我們將此物件傳遞給video.js播放器引用。
請考慮以下程式碼片段，用於在Android中動態建立帶有自定義video.js控制元件的video.js播放器：
<script>
// custom controls on mobile devices using video options
const videoOptions = {
"customControlsOnMobile": true,
"nativeControlsForTouch": false
}
// Initializing the video player using video options
const player = videojs('my-video-player', videoOptions);
</script>
在這段程式碼中，我們透過將“nativeControlsForTouch”的值設定為false來停用Android原生觸控控制元件，同時透過將“customControlsOnMobile”設定為true來啟用移動裝置上的自定義video.js控制元件。稍後，我們將影片選項傳遞到我們的影片播放器引用的初始化，該引用具有id“my-video-player”。
這是在Android作業系統裝置上正確設定video.js播放器的另一種方法。
示例2
在完整的示例中使用上述程式碼在Android中設定帶有自定義控制元件的video.js播放器將如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Player in Android Example</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
controls="true"
fluid="true"
muted="true"
autoplay="true"
poster=" https://tutorialspoint.tw/videos/sample.png"
data-setup='{}'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// custom controls on mobile devices using video options
const videoOptions = {
"customControlsOnMobile": true,
"nativeControlsForTouch": false
}
// Initializing the video player using video options
const player = videojs('my-video-player', videoOptions);
</script>
</body>
</html>
在這個示例中，我們使用javascript在<script>標籤中動態地將'customControlsOnMobile'屬性設定為true，並將'nativeControlsForTouch'設定為false，如果您仔細觀察，<video>標籤的'data-setup'屬性中的所有選項引用都已被刪除。
但是，當上述程式碼在Android移動瀏覽器中執行時，您會注意到影片播放器已正確建立，它將具有自定義video.js控制元件，而不是Android原生控制元件。
結論
在本教程中，我們瞭解瞭如何在Android裝置上設定video.js播放器。我們研究了在Android影片播放器中啟用自定義video.js控制元件並停用Android原生控制元件的兩種可用方法，以防止它們覆蓋video.js控制元件。我們還看到了每種方法的一個完全有效的示例。
862 次瀏覽
