基于H5和PHP的視頻上傳與預覽

在Web開發中，視頻上傳和預覽功能已經成為用戶期望的標配。使用HTML5和PHP語言，我們可以輕松實現這一功能。本文將介紹如何基于H5和PHP技術，實現視頻上傳和預覽的功能。

以一個線上視頻平臺為例，用戶可以通過上傳功能將自己的視頻分享給其他用戶。當用戶上傳視頻后，我們需要對視頻進行預覽，以便用戶確認上傳的視頻內容是否符合要求。下面將詳細介紹如何使用H5和PHP來實現這一功能。

1. 創建視頻上傳表單

<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="video" id="video">
<input type="submit" value="上傳視頻">
</form>

在上述代碼中，我們創建了一個初始為空的表單，使用了enctype屬性將表單聲明為能夠上傳文件的形式。用戶可以通過input標簽的type屬性設置為file，選擇本地的視頻文件進行上傳。

2. 上傳視頻到服務器

<?php
$videoFile = $_FILES['video']['tmp_name'];
$targetDir = 'uploads/';
$targetFile = $targetDir . basename($_FILES['video']['name']);
if (move_uploaded_file($videoFile, $targetFile)) {
echo "視頻上傳成功！";
} else {
echo "視頻上傳失敗！";
}
?>

在PHP代碼中，我們獲取了上傳的視頻文件的臨時存儲路徑$tmp_name，以及設置了最終存儲的目標路徑$targetDir。使用move_uploaded_file函數將臨時文件移動到目標路徑，實現視頻上傳。如果移動成功，將輸出上傳成功的提示，否則輸出上傳失敗的提示。

3. 視頻預覽

<video width="400" controls>
<source src="uploads/video.mp4" type="video/mp4">
<source src="uploads/video.webm" type="video/webm">
<p>您的瀏覽器不支持HTML5視頻播放。</p>
</video>

在視頻預覽的HTML代碼中，我們使用了<video>標簽，并設置了寬度為400像素，并且通過<source>標簽指定了多個視頻源格式，以兼容不同瀏覽器。在<p>標簽中，我們提供了一個文本信息，用于在不支持HTML5視頻播放的情況下顯示提示內容。

4. 總結

通過以上步驟，我們成功實現了基于H5和PHP的視頻上傳與預覽功能。用戶可以通過表單選擇本地視頻文件進行上傳，PHP將其移動到指定目錄并保存，然后通過HTML5的<video>標簽提供預覽功能，讓用戶確認上傳的視頻內容。這種方式簡單高效，并且可以靈活擴展，滿足用戶需求。

當然，根據實際情況，我們還可以添加更多的功能，比如視頻格式校驗、上傳進度條展示等。但本文主要針對基礎的視頻上傳和預覽功能進行介紹，希望能對讀者有所幫助。