Code – die besten Beiträge

PHP: Wie kann ich die Videoladezeit verbessern?

Hallo,

ich habe folgendes Problem:

Ich habe diese PHP-Datei erstellt und bei mir auf meinem iPhone lädt es die Videodatei sehr langsam bis gar nicht. Wenn ich aber auf PC im gleichen Netflix schaue, lädt es sehr schnell.

Ich habe es bei anderen Freunden testen lassen, die auch ein iPhone haben. Bei der einen Person lädt es auch sehr schnell, bei der anderen auch nicht, so wie bei mir. Bei mir lädt es immer nur schnell, wenn ich mobile Daten anhabe.

Die Videodateien sind 2-7 GB groß.

Vielleicht kann jemand eine Lösung für mich finden, das zu beheben. Wichtig ist, dass ich die Größe der Videodateien nicht verkleinern kann. Das heißt, es muss trotzdem schnell die Videodatei laden.

Ich sage schon einmal danke an die Person, die sich die Zeit und Mühe nimmt, mir zu helfen.

Bei einer Verbindung mit dem normalen Heimnetz sieht es auf dem iPhone so aus:

Wenn ich über LTE (mobile Daten) lade:

Der PHP-Code:

<?php 
  require 'db.php'; // Die Datenbankverbindung einbinden
  require 'is_premium.php'; // Die Datenbankverbindung einbinden

  // Überprüfen, ob eine ID übergeben wurde
  if (!isset($_GET['id']) || !is_numeric($_GET['id'])) {
    die('Ungültige Film-ID.');
  }

  $movie_id = intval($_GET['id']);
  // Film aus der Datenbank abfragen
  $stmt = $db->prepare('SELECT * FROM movies WHERE id = ?');
  $stmt->bind_param('i', $movie_id);
  $stmt->execute();
  $result = $stmt->get_result();

  if ($result->num_rows === 0) {
    die('Film nicht gefunden.');
  }

  $movie = $result->fetch_assoc();
  $stmt->close();
  $db->close();

  // Erkennen, ob die URL ein lokales Video ist oder über HTTPS geladen werden soll
  $is_local_video = strpos($movie['video'], 'uploads/videos/') === 0;
  $is_https = strpos($movie['video'], 'https://') === 0;
  $thumbnail = htmlspecialchars($movie['thumbnail']); // Thumbnail aus der Datenbank
?>
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php echo htmlspecialchars($movie['name']); ?> - MovieVel</title>
  <style>
   #css code
  </style>
</head>
<body>
  <div class="container">
    <div class="movie-detail">
      <h1><?php echo htmlspecialchars($movie['name']); ?></h1>
      <!-- Movie Video -->
      <div class="<?php echo $is_local_video ? 'video-container' : 'iframe-container'; ?>">
        <div class="play-btn">
          &#9654; <!-- Play-Symbol -->
        </div>
        <?php if ($is_local_video): ?>
          <!-- Video für progressive Web-Optimierung mit Bild-in-Bild-Unterstützung -->
          <video id="video-player" controls autoplay preload="auto" poster="<?php echo $thumbnail; ?>"
              onclick="this.requestPictureInPicture()" muted playsinline>
            <source src="<?php echo htmlspecialchars($movie['video']); ?>" type="video/mp4">
            Ihr Browser unterstützt dieses Videoformat nicht.
          </video>
        <?php elseif ($is_https): ?>
          <iframe 
            src="<?php echo htmlspecialchars($movie['video']); ?>" 
            allowfullscreen>
          </iframe>
        <?php else: ?>
          <p>Video konnte nicht geladen werden. Überprüfen Sie die URL oder die Serverkonfiguration.</p>
        <?php endif; ?>
      </div>
      <!-- Movie Description -->
      <div class="description-box">
        <h2>Über den Film</h2>
        <p><?php echo htmlspecialchars($movie['description']); ?></p>
      </div>
      <!-- Back Button -->
      <a href="index.php" class="back-btn">Zurück zur Übersicht</a>
    </div>
  </div>
  <script>
    const video = document.getElementById('video-player');
     
    // Überprüfen, ob Picture-in-Picture unterstützt wird
    if ('pictureInPictureEnabled' in document) {
      video.addEventListener('click', async () => {
        try {
          // Versuchen, Bild-in-Bild zu aktivieren
          if (document.pictureInPictureElement !== video) {
            await video.requestPictureInPicture();
          } else {
            // Wenn das Video schon im Bild-in-Bild-Modus ist, es wieder schließen
            await document.exitPictureInPicture();
          }
        } catch (err) {
          console.error('Fehler beim Wechseln in den Bild-in-Bild-Modus:', err);
        }
      });
    }
  </script>
</body>
</html>
Bild zum Beitrag
Homepage, SQL, HTML, Webseite, CSS, JavaScript, HTML5, Code, Datenbank, MySQL, PHP, Webdesign, Webentwicklung, phpMyAdmin

Frage zu c# bzw. #script?

Kennt sich jemand mit #script aus?

Ich habe folgendes Skript:

 "Script/DeviceTemplate": {
        "Content": "{{var assignments = []}}
{{var nodeId = ServiceTask.DeviceInstallationServiceTask.Details.NodeId}}
{{#each groupName in Typicals.DeviceTypes.xxx.DeviceTypicals[ServiceTask.DeviceInstallationServiceTask.Details.Typical.Name].SignalGroups}}
{{var index = 0}}
{{#each signal in Typicals.DeviceTypes.xxx.SignalGroups[groupName].SignalList}}
{{var baseComponent = ServiceTask.DeviceInstallationServiceTask.Details.Typical.SignalAssignments[groupName].BaseComponent}}
{{var _ = assignments.push({
    "assignmentIndex": index,
	"deviceId": "" + nodeId,
    "sparkplugName": baseComponent + signal.MetricBaseName
})}}
{{index = index + 1}}
{{/each}}
{{/each}}
{{ {
  "system": {
    "deviceName": nodeId
  },
  "apps": [
    {
      "appName": "SPARKPLUG",
      "appId": 12345,
      "settings": {
                "clientId": nodeId,
                "keepAliveInterval": 120,
                "publishInterval": 120,
                "startupDelay": 50
      },	 
      "sparkplugSettings": {
            "mqttTopic": "spBv1.0",
            "sparkplugTopic": "NTN/{MessageType}/" + nodeId
      },
      "assignments": assignments
    }
  ]
} |> json}}"
      }

Dieses hat zwei Schleifen, in der inneren Schleife soll die Variable index um 1 erhöht werden. Alles funktioniert, nur bekomme ich in der Ausgabe für jeden Aufruf von

index = index + 1

ebenfalls eine Ausgabe:

     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
   {"system":{"deviceName......

Wie kann ich die Ausgabe von 1 bis 23 unterdrücken?

Software, IT, programmieren, C Sharp, Code, Programmiersprache, Script, Softwareentwicklung

Warum scrollt es automatisch nach oben, wenn ich auf den Slider klicke (siehe bitte meine letzte Frage für Code)?

Wenn ich auf den Slider klicke, dann scrollt es danach nicht mehr nach unten, sondern geht automatisch nach oben. Woran könnte das Problem liegen?

HTML:

<article id="ÜberschriftAnfang">
  <h1>Michael Jackson - The King of Pop</h1>
  
  <!-- Slideshow Container -->
  <div class="slideshow-container">
   
    <!-- Slide 1 -->
    <div class="mySlides fade active" style="display:block">
      <div class="numbertext">1 / 3</div>
      <img src="Background picture.jpg" style="width:100%" alt="Background Image">
    </div>

    <!-- Slide 2 -->
    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="papers.co.jpg" style="width:100%" alt="Background Image 2">
    </div>

    <!-- Slide 3 -->
    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="5m6XCzF.jpg" style="width:100%" alt="Background Image 3">
    </div>

    <!-- Navigation Arrows -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

  </div>

  <!-- Dots Navigation -->
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
</article>

JS:

let slideIndex = 1;
showSlides(slideIndex); // Startet die Slideshow und zeigt das erste Bild an.

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");

  // Überprüfen, ob der slideIndex größer als die Anzahl der Slides ist
  if (n > slides.length) {
    slideIndex = 1; // Setze den Index auf 1, wenn er größer ist als die Anzahl der Slides
  }

  // Überprüfen, ob der slideIndex kleiner als 1 ist
  if (n < 1) {
    slideIndex = slides.length; // Setze den Index auf die letzte Slide, wenn er kleiner ist als 1
  }

  // Alle Slides ausblenden
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  // Alle Dots zurücksetzen
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  // Zeige das aktuelle Bild und Dot
  slides[slideIndex - 1].style.display = "block";  
  dots[slideIndex - 1].className += " active";
}

CSS: siehe Antwort

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webentwicklung, Frontend

Meistgelesene Beiträge zum Thema Code