Detaillierte Erklärung des Videocodes in HTML5-H5-Tutorial-php.cn

Heim

Web-Frontend

H5-Tutorial

Detaillierte Erklärung des Videocodes in HTML5

寻∝梦

Aug 13, 2018 pm 06:53 PM

In diesem Artikel geht es hauptsächlich um einige Kapitel von HTML5Video, die eher für Anfänger geeignet sind, um etwas über HTML5 zu lernen. Probieren wir die Struktur dieses Elements aus.

HTML5-Video

Viele Websites verwenden HTML5 als Standard für die Anzeige von Videos.

Videos auf Websites

Bisher gab es keinen Standard für die Anzeige von Videos auf Webseiten.

Heutzutage werden die meisten Videos über Plug-ins (z. B. Flash) angezeigt. Allerdings verfügen nicht alle Browser über die gleichen Plugins.

HTML5 gibt eine Standardmethode zum Einbinden von Videos über das Videoelement an.

Browser-Unterstützung

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Element.

Hinweis: Internet Explorer 8 oder frühere IE-Versionen werden nicht unterstützt .

HTML5 (Video) – So funktioniert es

Um ein Video in HTML5 anzuzeigen, brauchen Sie nur:

<!DOCTYPE html>
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">

Nach dem Login kopieren

Ihr Browser unterstützt den HTML5-Video-Tag nicht.

Das

-Element bietet Wiedergabe-, Pausen- und Lautstärkeregler zur Steuerung Video.

Gleichzeitig stellt das Elementelement auch Breiten- und Höhenattribute bereit, um die Größe des Videos zu steuern. Wenn Höhe und Breite festgelegt sind, wird beim Laden der Seite der erforderliche Videoraum reserviert. . Wenn diese Eigenschaften nicht festgelegt sind und der Browser die Größe des Videos nicht kennt, kann der Browser beim Laden keinen bestimmten Platz reservieren und die Seite ändert sich basierend auf der Größe des Originalvideos. Der zwischen

und Tags eingefügte Inhalt wird für die Anzeige in Browsern bereitgestellt, die das Videoelement nicht unterstützen. Das

-Element unterstützt mehrere Elemente, die verschiedene Videodateien verknüpfen können. Der Browser verwendet das erste erkannte Format:

HTML5 – Steuerung über das DOM. Das

HTML5 und die Elemente verfügen außerdem über Methoden, Eigenschaften und Ereignisse. Die Methoden, Eigenschaften und Ereignisse von

und Elementen können mit JavaScript gesteuert werden. Die Methoden von

werden zum Abspielen, Anhalten und Laden verwendet. Die Eigenschaften (wie Dauer, Lautstärke etc.) können ausgelesen bzw. eingestellt werden. Die DOM-Ereignisse können Sie beispielsweise benachrichtigen, wenn die Wiedergabe eines Elements beginnt, angehalten wird, gestoppt wurde usw.

Die einfache Methode im Beispiel zeigt uns, wie man das Element verwendet, Attribute liest und setzt und wie man Methoden aufruft.

<!DOCTYPE html> 
<html> 
<body> 
<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="/statics/demosource/mov_bbb.mp4" type="video/mp4">
    <source src="/statics/demosource/mov_bbb.ogg" type="video/ogg">

Nach dem Login kopieren

Ihr Browser unterstützt das HTML5-Video-Tag nicht.

</video>
</div> 
<script> 
var myVideo=document.getElementById("video1"); 
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
function makeBig()
{ 
myVideo.width=560; 
} 
function makeSmall()
{ 
myVideo.width=320; 
} 
function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
</body> 
</html>

Nach dem Login kopieren

HTML5-Video-Tag

definiert mehrere Medienressourcen, wie

Definiert in der Textspur des Media Players

HTML5 (Video) – So funktioniert es

Um Videos in HTML5 anzuzeigen, benötigen Sie lediglich:

<!DOCTYPE html>
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">

Nach dem Login kopieren

Ihr Browser unterstützt das HTML5-Video-Tag nicht.

Das

-Element bietet Wiedergabe-, Pausen- und Lautstärkeregler zur Steuerung Video.

und Tags eingefügte Inhalt wird für die Anzeige in Browsern bereitgestellt, die das Videoelement nicht unterstützen.

[Verwandte Empfehlungen]

Grundelemente von HTML, damit Sie HTML von Grund auf lernen können

HTML5 Verwendung Videoelement

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Videocodes in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat -Befehle und wie man sie benutzt

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7529

CakePHP-Tutorial

1378

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

So führen Sie das H5 -Projekt aus Apr 06, 2025 pm 12:21 PM

Ausführen des H5 -Projekts erfordert die folgenden Schritte: Installation der erforderlichen Tools wie Webserver, Node.js, Entwicklungstools usw. Erstellen Sie eine Entwicklungsumgebung, erstellen Sie Projektordner, initialisieren Sie Projekte und schreiben Sie Code. Starten Sie den Entwicklungsserver und führen Sie den Befehl mit der Befehlszeile aus. Vorschau des Projekts in Ihrem Browser und geben Sie die Entwicklungsserver -URL ein. Veröffentlichen Sie Projekte, optimieren Sie Code, stellen Sie Projekte bereit und richten Sie die Webserverkonfiguration ein.

Was genau bedeutet H5 -Seitenproduktion? Apr 06, 2025 am 07:18 AM

Die Produktion von H5-Seiten bezieht sich auf die Erstellung von plattformübergreifenden kompatiblen Webseiten unter Verwendung von Technologien wie HTML5, CSS3 und JavaScript. Sein Kern liegt im Parsingcode des Browsers, der Struktur-, Stil- und interaktive Funktionen macht. Zu den allgemeinen Technologien gehören Animationseffekte, reaktionsschnelles Design und Dateninteraktion. Um Fehler zu vermeiden, sollten Entwickler debuggen werden. Leistungsoptimierung und Best Practices umfassen Bildformatoptimierung, Anforderungsreduzierung und Codespezifikationen usw., um die Ladegeschwindigkeit und die Codequalität zu verbessern.

So erstellen Sie H5 -Klicksymbol Apr 06, 2025 pm 12:15 PM

Zu den Schritten zum Erstellen eines H5 -Klicksymbols gehören: Vorbereitung eines quadratischen Quellenbildes in der Bildbearbeitungssoftware. Fügen Sie die Interaktivität in den H5 -Editor hinzu und legen Sie das Klickereignis fest. Erstellen Sie einen Hotspot, der das gesamte Symbol abdeckt. Stellen Sie die Aktion von Klickereignissen fest, z. B. zum Springen zur Seite oder zum Auslösen von Animationen. Exportieren Sie H5 als HTML-, CSS- und JavaScript -Dateien. Stellen Sie die exportierten Dateien auf einer Website oder einer anderen Plattform ein.

Welche Anwendungsszenarien eignen sich für die H5 -Seitenproduktion Apr 05, 2025 pm 11:36 PM

H5 (HTML5) eignet sich für leichte Anwendungen wie Marketingkampagnen, Produktdisplayseiten und Micro-Websites für Unternehmenswerbung. Seine Vorteile liegen in plattformartigen und reichhaltigen Interaktivität, aber seine Einschränkungen liegen in komplexen Interaktionen und Animationen, lokalen Ressourcenzugriff und Offline-Funktionen.

Der Unterschied zwischen H5- und Miniprogramm und Apps Apr 06, 2025 am 10:42 AM

H5. Der Hauptunterschied zwischen Mini -Programmen und App ist: Technische Architektur: H5 basiert auf Web -Technologie, und Mini -Programme und Apps sind unabhängige Anwendungen. Erfahrung und Funktionen: H5 ist leicht und einfach zu bedienen, mit begrenzten Funktionen; Mini -Programme sind leicht und haben eine gute Interaktivität. Apps sind leistungsstark und haben reibungslose Erfahrung. Kompatibilität: H5 ist plattformübergreifend, Applets und Apps werden von der Plattform eingeschränkt. Entwicklungskosten: H5 verfügt über niedrige Entwicklungskosten, mittlere Mini -Programme und die höchste App. Anwendbare Szenarien: H5 eignet sich für Informationsanzeigen, Applets eignen sich für leichte Anwendungen und Apps eignen sich für komplexe Funktionen.

Was ist die H5 -Programmiersprache? Apr 03, 2025 am 12:16 AM

H5 ist keine eigenständige Programmiersprache, sondern eine Sammlung von HTML5, CSS3 und JavaScript zum Erstellen moderner Webanwendungen. 1. HTML5 definiert die Webseitenstruktur und -inhalt und bietet neue Tags und APIs. 2. CSS3 steuert Stil und Layout und führt neue Funktionen wie Animation ein. 3. JavaScript implementiert dynamische Interaktion und verbessert Funktionen durch DOM -Operationen und asynchrone Anfragen.

Wie gehe ich mit der Privatsphäre und Berechtigungen des Benutzer Ort mit der Geolocation -API um? Mar 18, 2025 pm 02:16 PM

In dem Artikel wird die Verwaltung der Privatsphäre und Berechtigungen des Benutzerstandorts mithilfe der Geolocation -API erörtert, wobei die Best Practices für die Anforderung von Berechtigungen, die Gewährleistung der Datensicherheit und die Einhaltung der Datenschutzgesetze hervorgehoben werden.

Ist die H5-Seitenproduktion eine Front-End-Entwicklung? Apr 05, 2025 pm 11:42 PM

Ja, die H5-Seitenproduktion ist eine wichtige Implementierungsmethode für die Front-End-Entwicklung, die Kerntechnologien wie HTML, CSS und JavaScript umfasst. Entwickler bauen dynamische und leistungsstarke H5 -Seiten auf, indem sie diese Technologien geschickt kombinieren, z. B. die Verwendung der & lt; canvas & gt; Tag, um Grafiken zu zeichnen oder JavaScript zu verwenden, um das Interaktionsverhalten zu steuern.

See all articles