Heim Web-Frontend H5-Tutorial Beispielcode für die Verwendung von h5-Video-Tags

Beispielcode für die Verwendung von h5-Video-Tags

May 15, 2018 am 10:30 AM
h5 video 标签

HTML-Video ist für HTML 5+ geeignet und wird zum Definieren von Video-Streaming-Medien für die Online-Anzeige verwendet. Hier ist eine kurze Einführung für Freunde, die es benötigen

Hier ist der Kommentartext. Wenn der Browser HTML 5 nicht unterstützt, wird der Text hier angezeigt. Sofern unterstützt, wird das Video direkt angezeigt und der Text ignoriert.
<video 
width
="320" 
height
="240" src="www.php.cn/movie.ogg" controls="controls">
Nach dem Login kopieren



Wenn Sie in HTML 4 und früher ein Video zur Online-Anzeige in eine Webseite einbetten möchten, müssen Sie im Allgemeinen Flash-Video-Streaming verwenden, indem Sie < ;object> und -Tag können Sie Videodateien in swf, flv und anderen Formaten über den Browser abspielen, allerdings muss der Browser ein Plug-in eines Drittanbieters installieren: Adobe Flash Player. Moderne Smartphones und iPads unterstützen Flash in der Regel nicht und können daher keine Videos im Internet durchsuchen. HTML 5 hat diese Tatsache geändert. Webentwickler müssen nur noch das

AttributeWertBeschreibung
AutoplayAutoplayWenn dieses Attribut vorhanden ist, wird das Video abgespielt, sobald es fertig ist.
SteuerelementeSteuerelementeWenn dieses Attribut erscheint, werden dem Benutzer die Steuerelemente angezeigt, z. B. die Wiedergabe Schaltfläche.
HöhePixelwert Legt die Höhe des Videoplayers fest.
SchleifeSchleifeWenn dieses Attribut erscheint, beginnt die Wiedergabe erneut, nachdem die Mediendatei abgespielt wurde.
vorladenauto/meta/noneGibt an, ob das Video vorab geladen werden soll, mögliche Werte:
automatisch – wird geladen, wenn die Seite geladen wird geladen Laden Sie das gesamte Video
Meta – laden Sie die Metadaten nur
, wenn die Seite geladen wirdnone - 当页面加载后不载入视频
* src视频地址要播放的视频的 URL,建议使用绝对地址。
width像素值设置视频播放器的宽度。


如何写兼容的视频标签?

由于旧的浏览器和Internet Explorer不支持

<video width="320" height="240" controls> 
<!-- 兼容 Firefox --> 
<source src="http://www.jb51.net/ movie.ogg" type="video/ogg" /> 
<!-- 兼容 Safari/Chrome--> 
<source src="http://www.jb51.net/ movie.mp4" type="video/mp4" /> 
<!-- 如果浏览器不支持video标签,则使用flash --> 
<embed src="http://www.jb51.net/ movie.swf" type="application/x-shockwave-flash" 
width="320" height="240" allowscriptaccess="always" allowfullscreen="true"></embed> 
</video>
Nach dem Login kopieren

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

4. H5 video标签只能放声音不能放视频的解决办法

5. IIS的MIME未注册MP4类型,导致无法识别vidoe标签的解决办法

Das obige ist der detaillierte Inhalt vonBeispielcode für die Verwendung von h5-Video-Tags. 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

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

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 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So beheben Sie den schwerwiegenden Fehler VIDEO DXGKRNL in Windows 11 So beheben Sie den schwerwiegenden Fehler VIDEO DXGKRNL in Windows 11 Apr 13, 2023 pm 08:22 PM

Zum Aufrufen klicken: ChatGPT Tool Plug-in Navigation Collection Einige Benutzer beschwerten sich darüber, dass ihre Computer häufig mit dem Stoppcode VIDEO DXGKRNL FATAL ERROR abstürzten. Dieses spezielle Problem tritt nur gelegentlich auf und hat einen Bugcheck-Wert von 0x00000113, was auf einen Verstoß im Microsoft DirectX-Grafikkernel-Subsystem hinweist, wie durch den Bugcheck-Wert angezeigt. Normalerweise tritt der Fehler auf, wenn ein beschädigter Treiber den normalen Betrieb des Grafikprozessors der Grafikkarte beeinträchtigt. Wenn Sie derzeit mit diesem speziellen Problem zu kämpfen haben, finden Sie in unserem Artikel eine Vielzahl hochwertiger Tipps zur Fehlerbehebung. Nachfolgend finden Sie verschiedene Methoden, die andere Benutzer, bei denen genau derselbe Fehler aufgetreten ist, erfolgreich angewendet haben. Ja

So suchen Sie auf allen Registerkarten in Chrome und Edge nach Text So suchen Sie auf allen Registerkarten in Chrome und Edge nach Text Feb 19, 2024 am 11:30 AM

Dieses Tutorial zeigt Ihnen, wie Sie bestimmte Texte oder Phrasen auf allen geöffneten Tabs in Chrome oder Edge unter Windows finden. Gibt es eine Möglichkeit, eine Textsuche auf allen geöffneten Tabs in Chrome durchzuführen? Ja, Sie können eine kostenlose externe Weberweiterung in Chrome verwenden, um Textsuchen auf allen geöffneten Tabs durchzuführen, ohne die Tabs manuell wechseln zu müssen. Einige Erweiterungen wie TabSearch und Strg-FPlus können Ihnen dabei helfen, dies einfach zu erreichen. Wie durchsucht man Text auf allen Registerkarten in Google Chrome? Strg-FPlus ist eine kostenlose Erweiterung, die es Benutzern erleichtert, auf allen Registerkarten ihres Browserfensters nach einem bestimmten Wort, einer bestimmten Phrase oder einem bestimmten Text zu suchen. Diese Erweiterung

Was bedeutet h5? Was bedeutet h5? Aug 02, 2023 pm 01:52 PM

H5 bezieht sich auf HTML5, die neueste Version von HTML. H5 ist eine leistungsstarke Auszeichnungssprache, die Entwicklern mehr Auswahlmöglichkeiten und kreativen Raum bietet. Ihr Aufkommen fördert die Entwicklung der Web-Technologie und macht die Interaktion und Wirkung von Webseiten noch besser Wenn es allmählich reift und populär wird, glaube ich, dass es in der Internetwelt eine immer wichtigere Rolle spielen wird.

Das Motorola Razr 50 Ultra erscheint in einem durchgesickerten Teaser-Video mit wasserdichtem Gehäuse und riesigem Zweitdisplay Das Motorola Razr 50 Ultra erscheint in einem durchgesickerten Teaser-Video mit wasserdichtem Gehäuse und riesigem Zweitdisplay Jun 20, 2024 pm 09:31 PM

In den letzten Wochen sind die wichtigsten Spezifikationen und die Euro-Preise des Motorola Razr 50 und des Razr 50 Ultra durchgesickert. Nun konnte der enorm zuverlässige Leaker @MysteryLupin das unten eingebettete Teaser-Video veröffentlichen, das

Wie füge ich Tags auf Douyin hinzu, um Traffic anzulocken? Zu welchen Tags auf der Plattform lässt sich am einfachsten Traffic anziehen? Wie füge ich Tags auf Douyin hinzu, um Traffic anzulocken? Zu welchen Tags auf der Plattform lässt sich am einfachsten Traffic anziehen? Mar 22, 2024 am 10:28 AM

Als beliebte soziale Plattform für Kurzvideos verfügt Douyin über eine riesige Nutzerbasis. Für Douyin-Ersteller ist die Verwendung von Tags zur Gewinnung von Traffic eine wirksame Möglichkeit, die Bekanntheit von Inhalten zu erhöhen und Aufmerksamkeit zu erregen. Wie nutzt Douyin also Tags, um Traffic anzulocken? Dieser Artikel beantwortet diese Frage ausführlich für Sie und stellt verwandte Techniken vor. 1. Wie füge ich Tags auf Douyin hinzu, um Traffic anzulocken? Achten Sie beim Posten eines Videos darauf, Tags auszuwählen, die für den Inhalt relevant sind. Diese Tags sollten das Thema und die Schlüsselwörter Ihres Videos abdecken, damit Benutzer Ihr Video mithilfe von Tags leichter finden können. Die Nutzung beliebter Hashtags ist eine effektive Möglichkeit, die Bekanntheit Ihres Videos zu erhöhen. Recherchieren Sie aktuelle beliebte Tags und Trends und integrieren Sie diese in Ihre Videobeschreibungen und Tags. Diese beliebten Tags sind in der Regel besser sichtbar und können die Aufmerksamkeit von mehr Zuschauern auf sich ziehen. 3. Etikett

Was ist die Uhr hinter dem TikTok-Label? Wie markiere ich ein Douyin-Konto? Was ist die Uhr hinter dem TikTok-Label? Wie markiere ich ein Douyin-Konto? Mar 24, 2024 pm 03:46 PM

Wenn wir Douyin-Werke durchsuchen, sehen wir oft ein Uhrsymbol hinter dem Tag. Was genau ist diese Uhr also? Dieser Artikel konzentriert sich auf die Diskussion „Was ist die Uhr hinter dem Douyin-Label“ und hofft, Ihnen nützliche Hinweise für die Verwendung von Douyin zu geben. 1. Was ist die Uhr hinter dem Douyin-Label? Douyin wird einige heiße Themenherausforderungen starten. Wenn Benutzer teilnehmen, sehen sie nach dem Tag ein Uhrsymbol, was bedeutet, dass die Arbeit an der Themenherausforderung teilnimmt, und zeigt die verbleibende Zeit der Herausforderung an. Bei einigen zeitkritischen Inhalten wie Feiertagen, besonderen Ereignissen usw. fügt Douyin nach dem Etikett ein Uhrensymbol hinzu, um Benutzer an die Gültigkeitsdauer des Inhalts zu erinnern. 3. Beliebte Tags: Wenn ein Tag beliebt wird, fügt Douyin hinter dem Tag ein Uhrsymbol ein, um anzuzeigen, dass der Tag beliebt ist

Wie unterscheidet man zwischen H5, WEB-Front-End, Big-Front-End und WEB-Full-Stack? Wie unterscheidet man zwischen H5, WEB-Front-End, Big-Front-End und WEB-Full-Stack? Aug 03, 2022 pm 04:00 PM

Dieser Artikel hilft Ihnen dabei, schnell zwischen H5, WEB-Front-End, großem Front-End und WEB-Full-Stack zu unterscheiden. Ich hoffe, er wird Freunden in Not helfen!

Die Leistung der Snapdragon Die Leistung der Snapdragon Jun 20, 2024 pm 03:59 PM

Trotz des Hypes um den Qualcomm Snapdragon X Elite war es ein eher mittelmäßiger Start. In unserem Test haben wir festgestellt, dass der beeindruckendste Teil des neuen Asus Vivobook S 15 mit Qualcomm Snapdragon X Elite X1E-78-100 die nahtlose Verarbeitung ist

See all articles