Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

播放影片

Godot 通過 class_VideoPlayer 節點支援影片的播放。

支援所有平台。

核心中僅支援 Ogg Theora 格式(請勿與 Ogg Vorbis 音訊混淆)。擴充可以支援額外的格式,但是截止到 2022 年 7 月,還沒有這種擴充存在。

Godot 核心無法支援 H.264 和 H.265,因為它們都被軟體專利所限。AV1 不需要授權,但 CPU 解碼仍然很慢,也不是所有 GPU 都已支援硬體解碼。

Godot 3.x 核心中支援 WebM,但是會在 4.0 中移除支援,因為 bug 很多難以維護。因此**不推薦使用 WebM**。

備註

你的影片可能使用的是 .ogg 或者 .ogx 副檔名,這是帶有資料的 Ogg 容器的通用副檔名。

將這些檔副檔名修改為 .ogv``*可能*可以讓影片在 Godot 中匯入。不過,並不是所有 ``.ogg.ogx 副檔名的檔都是影片——有些可能只包含音訊。

設定 Godot

  1. 該簡介是「建立新節點」對話框中唯一的描述。

  2. 在場景樹面板上選中 VideoStreamPlayer 節點,到屬性面板中為 Stream 屬性載入 .ogv 檔案。

  3. 如果你希望在場景載入時立即播放影片,請在屬性面板中勾選 Autoplay。否則,請保持 Autoplay 關閉,並在需要時在腳本中呼叫 VideoPlayer 節點的 play() 開始播放。

處理大小變化及不同的縱橫比

Godot 4.0 中在預設情況下,VideoPlayer 會自動調整到與影片解析度相配對的大小。你可以讓它遵循普通的 Control 大小規則,啟用 VideoPlayer 節點的 Expand 即可。

要調整 VideoPlayer 節點的大小隨視窗大小改變的方式,請通過 2D 編輯器視口頂部的**佈局**按鈕調整錨點。不過,這種設定可能不足以處理所有可能的情況,例如全屏播放影片但不造成形變(需要在邊界處留白)。要進行精確的控制,你可以使用專為處理這種情況設計的 AspectRatioContainer 節點:

新增一個 AspectRatioContainer 節點。請確保它不是任何其他容器節點的子節點。選中該 AspectRatioContainer 節點,然後在 2D 編輯器的頂部將**佈局**設定為**整個矩形**。將 AspectRatioContainer 節點的 **Ratio(比例)**設定為與你的影片的長寬比配對的比例。你可以在屬性面板裡直接輸入數學公式。請記住要將其中的一個運算元寫成浮點形式,否則會得到整數的商。

在編輯器屬性面板中修改 AspectRatioContainer 的 Ratio 屬性

求值會得到(大約)1.777778

配置好 AspectRatioContainer 之後,請將你的 VideoPlayer 節點調整為該 AspectRatioContainer 節點的子節點。請確保禁用了該 VideoPlayer 的 Expand。你的影片現在應該就會自動適應到全屏的大小,不產生變形。

也參考

更多在專案中支援不同的長寬比的技巧,請參閱 多解析度

在 3D 表面上顯示影片

使用 VideoPlayer 節點作為 Viewport 節點的子節點,就可以在 3D 表面上顯示任何 2D 節點。例如,可以用於顯示動態的廣告板,影格動畫可能花費太多的記憶體。

填寫下列設定:

  1. 建立一個 Viewport 節點。將其設定為與你的影片大小相配對的像素大小。

  2. 建立一個 VideoPlayer 節點*作為該 Viewport 節點的子節點*,並為其指定一個影片的路徑。請確保禁用了 Expand,需要時啟用 Autoplay

  3. 建立一個 MeshInstance 節點,將其 Mesh 屬性設為 PlaneMesh 或 QuadMesh。將該網格的大小調整到與影片的長寬比一致(否則看上去就會變形)。

  4. 在 GeometryInstance 部分的 Material Override 屬性中新建一個 SpatialMaterial 資源。

  5. 在該 SpatialMaterial(底部)的 Resource 部分啟用 Local To Scene。這是在 Albedo Texture 屬性中使用 ViewportTexture 所*必須的*。

  6. 在該 SpatialMaterial 中,將 Albedo > Texture 屬性設定為**新建 ViewportTexture**。點擊編輯這個新的資源,在 Viewport Path 屬性中指定指向 Viewport 節點的路徑。

  7. 在該 SpatialMaterial 中啟用 Albedo Tex Force sRGB,防止顏色變化。

  8. 如果廣告板應該自發光,請啟用 Flags > Unshaded 提升渲染性能。

若欲檢視範例專案,請參考作業系統示範專案: https://github.com/godotengine/godot-demo-projects/tree/master/misc/os_test

Looping a video

For looping a video, the Loop property can be enabled. This will seamlessly restart the video when it reaches its end.

Note that setting the project setting Video Delay Compensation to a non-zero value might cause your loop to not be seamless, because the synchronization of audio and video takes place at the start of each loop causing occasional missed frames. Set Video Delay Compensation in your project settings to 0 to avoid frame drop issues.

限制

Godot 沒有使用限制

  • 不支援將影片跳躍到特定的時間點。

  • 不支援修改播放速度。VideoPlayer 也不會遵循 Engine.time_scale

  • 不支援從 URL 播放影片流。

Chroma Key Videos

Chroma key, commonly known as the "green screen" or "blue screen" effect, allows you to remove a specific color from an image or video and replace it with another background. This effect is widely used in video production to composite different elements together seamlessly.

../../_images/chroma_key_video.webp

We will achieve the chroma key effect by writing a custom shader in GDScript and using a VideoStreamPlayer node to display the video content.

Scene Setup

Ensure that the scene contains a VideoStreamPlayer node to play the video and a Control node to hold the UI elements for controlling the chroma key effect.

../../_images/chroma_key_scene.webp

Writing the Custom Shader

To implement the chroma key effect, follow these steps:

  1. Select the VideoStreamPlayer node in the scene and go to its properties. Under CanvasItem > Material, create a new shader named "ChromaKeyShader.gdshader."

  2. In the "ChromaKeyShader.gdshader" file, write the custom shader code as shown below:

shader_type canvas_item;

# Uniform variables for chroma key effect
uniform vec3 chroma_key_color : source_color = vec3(0.0, 1.0, 0.0);
uniform float pickup_range : hint_range(0.0, 1.0) = 0.1;
uniform float fade_amount : hint_range(0.0, 1.0) = 0.1;

void fragment() {
    # Get the color from the texture at the given UV coordinates
    vec4 color = texture(TEXTURE, UV);

    # Calculate the distance between the current color and the chroma key color
    float distance = length(color.rgb - chroma_key_color);

    # If the distance is within the pickup range, discard the pixel
    # the lesser the distance more likely the colors are
    if (distance <= pickup_range) {
        discard;
    }

    # Calculate the fade factor based on the pickup range and fade amount
    float fade_factor = smoothstep(pickup_range, pickup_range + fade_amount, distance);

    # Set the output color with the original RGB values and the calculated fade factor
    COLOR = vec4(color.rgb, fade_factor);
}

The shader uses the distance calculation to identify pixels close to the chroma key color and discards them, effectively removing the selected color. Pixels that are slightly further away from the chroma key color are faded based on the fade_factor, blending them smoothly with the surrounding colors. This process creates the desired chroma key effect, making it appear as if the background has been replaced with another image or video.

The code above represents a simple demonstration of the Chroma Key shader, and users can customize it according to their specific requirements.

UI Controls

To allow users to manipulate the chroma key effect in real-time, we created sliders in the Control node. The Control node's script contains the following functions:

extends Control

func _on_color_picker_button_color_changed(color):
    # Update the "chroma_key_color" shader parameter of the VideoStreamPlayer's material
    $VideoStreamPlayer.material.set("shader_parameter/chroma_key_color", color)

func _on_h_slider_value_changed(value):
    # Update the "pickup_range" shader parameter of the VideoStreamPlayer's material
    $VideoStreamPlayer.material.set("shader_parameter/pickup_range", value)

func _on_h_slider_2_value_changed(value):
    # Update the "fade_amount" shader parameter of the VideoStreamPlayer's material
    $VideoStreamPlayer.material.set("shader_parameter/fade_amount", value)

func _on_video_stream_player_finished():
    # Restart the video playback when it's finished
    $VideoStreamPlayer.play()

also make sure that the range of the sliders are appropriate, our settings are :

../../_images/slider_range.webp

Signal Handling

Connect the appropriate signal from the UI elements to the Control node's script. you created in the Control node's script to control the chroma key effect. These signal handlers will update the shader's uniform variables in response to user input.

Save and run the scene to see the chroma key effect in action! With the provided UI controls, you can now adjust the chroma key color, pickup range, and fade amount in real-time, achieving the desired chroma key functionality for your video content.