Question

我正在处理一个网站，使其在网站背景中包含不同的视频。我希望通过使用<video id="bgvid" playsinline="" autoplay="" muted="" loop="" style="margin-right: 3px;width: 300px;"> <source src="vid/le'toile.mp4" type="video/mp4"> </video> <div id="polina"> <h1>Le'toile</h1> <p>ART of Switching</p> <p>We believe that a seamless blend of Art & Technology makes what we create, Alive and Evolving.</p> </div>标记来实现此方法，为此我尝试了以下内容......

<div>

它会在后台显示视频，但是当我们再次尝试上面的代码以在背景上显示另一个视频时，它会覆盖第一个视频。仅表示第二个视频播放。那么，如何使用2个<root> <node>some_name0 <value>some_int</value> </node> <node>some_name1 <value>some_float</value> </node> <node>some_name2 <value>some_sting</value> </node> <node>some_name3 <value>some_bool</value> </node> </root>标签播放这两个视频？

Answer 1

<!DOCTYPE html> 

<html lang="en"> 
    <meta charset="UTF-8"> 

</html> 

<?php
if (isset($_FILES["photo"]["error"])) {
    if ($_FILES["photo"]["error"] > 0) {
        echo "Error: " . $_FILES["photo"]["error"] . "<br>";
    } else {
        $allowed = array("jpg" => "image/jpg", "jpeg" => "image/jpeg", "gif" => "image/gif", "png" => "image/png");
        $filename = $_FILES["photo"]["name"];
        $filetype = $_FILES["photo"]["type"];
        $filesize = $_FILES["photo"]["size"];

// Verify file extension 
        $ext = pathinfo($filename, PATHINFO_EXTENSION);
        if (!array_key_exists($ext, $allowed))
            die("Error: Please select a valid file format.");

// Verify file size - 5MB maximum 
        $maxsize = 5 * 1024 * 1024;
        if ($filesize > $maxsize)
            die("Error: File size is larger than the allowed limit.");

// Verify MYME type of the file 
        if (in_array($filetype, $allowed)) {
// Check whether file exists before uploading it 
            if (file_exists("upload/" . $_FILES["photo"]["name"])) {
                echo $_FILES["photo"]["name"] . " is already exists.";
            } else {
                move_uploaded_file($_FILES["photo"]["tmp_name"], "upload/" . $_FILES["photo"]["name"]);

                echo "Your file was uploaded successfully.";
            }
        } else {

            echo "Error: There was a problem uploading your file - please try again.";
        }
    }
} else {
    echo "Error: Invalid parameters - please contact your server administrator.";
}
?>

请检查此链接： - https://html5backgroundvideos.com/how-to-create-a-html5-background-video-using-html-css-and-javascript/

Answer 2

您可以使用多个视频标记

<!DOCTYPE html>
<html>

<body>

  <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.
  </video>
  <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.
  </video>

</body>

</html>

它不会重叠

Answer 3

在您的代码中，将autoplay属性设置为“autoplay”，它将播放视频

<video id="bgvid" playsinline="" autoplay="autoplay" muted="" loop="" style="margin-right: 3px;width: 300px;">
<source src="vid/le'toile.mp4"></video>
<div id="polina"><h1>Le'toile</h1><p>ART of Switching<p>We believe that a seamless blend of Art & Technology makes what we create, Alive and Evolving.</p>

希望这有帮助。

如何在<div>标签的背景下提供不同的视频？

3 个答案: