Web-Frontend
H5-Tutorial
Ausführliche Erläuterung der Audio- und Videosteuerungscodebeispiele für neue H5-Attribute
Ausführliche Erläuterung der Audio- und Videosteuerungscodebeispiele für neue H5-Attribute
In diesem Artikel werden hauptsächlich die Steuerungsdetails (empfohlen) der neuen H5--Attribute Audio Audio und Video Video (empfohlen) vorgestellt. Es hat einen bestimmten Referenzwert . Wenn Sie interessiert sind, können Studierende mehr darüber erfahren.
In diesem Artikel geht es wie folgt um die Steuerung von Audio und Video, den neuen Attributen von H5:
1. Audio (Audio)
<audio controls="controls"> <source src="这里面放入音频文件路径"></source> </audio>
2. Video
<video controls="controls" loop="loop" autoplay="autoplay" id="video"> <source src="这里面放入视频文件路径"></source> </video> <button>静音</button> <button>打开声音</button> <button>播放</button> <button>停止播放</button> <button>全屏</button>
Das Folgende ist die Steuerung von Videodateien
JavascriptExport.
<script>
var myVideo=document.getElementById("video");
var btn=document.getElementById("button");
btn[0].click=function(){
myVideo.muted=true;(是否静音：是)
}
btn[1].click=function(){
myVideo.muted=true;(是否静音：否)
}
btn[2].click=function(){
myVideo.play();(播放)
}
btn[3].click=function(){
myVideo.pause();(停止播放)
}
btn[4].click=function(){
myVideo.webkitrequestFullscreen();(全屏显示)
}
</script>3. So stellen Sie den Fortschrittsbalken und die Videowiedergabedauer
so ein, dass sie synchronisiert werden.
Wie im Bild gezeigt:
Lassen Sie mich hier zunächst darüber sprechen
(1), die Gesamtdauer des Das Video muss abgerufen werden (Dauer). Weisen Sie dem Fortschrittsbalken den maximalen Wert zu, progress.max=video.duration;
(2), Sie müssen die aktuelle Zeitposition der aktuellen Videowiedergabe abrufen (currentTime ) wird der Länge des aktuellen Fortschrittsbalkens zugewiesen, progress.value=video.currentTime;
Während das Video abgespielt wird, muss sichergestellt werden dass der Wert des Fortschrittsbalkens die Länge des Videos und die aktuelle Wiedergabezeitposition in der Zeit ermitteln kann.
Sie müssen einen Timer setInterval(pro, 100); öffnen: Das heißt, den Wert des Videos alle 1 Millisekunde abrufen und ihn dem Fortschrittsbalken zuweisen, um die Aktualität sicherzustellen.
Auf diese Weise kann der Fortschrittsbalken genau mit dem Video synchronisiert werden.
4. So verwenden Sie das Formularelement-Attribut range, um die Lautstärke des Videos zu steuern.
Zuerst müssen Sie den Wert des Bereichs ermitteln und ihn der Lautstärke des Videos zuweisen, um die Lautstärke des Videos zu steuern range.value,
<input type="range" min="0" value="50" max="100" id="range" />
var ran=document.getElementById("range");. Daher müssen Sie beurteilen, ob er im Drag-Ereignis stummgeschaltet ist zu falsch.
Der endgültig implementierte Code lautet wie folgt:
<!DOCTYPE html>
<html>
<body>
<video id="video1" controls="controls" width="400px" height="400px">
<source src="img/1.mp4">
</video>
<p>
<button onclick="enableMute()" type="button">关闭声音</button>
<button onclick="disableMute()" type="button">打开声音</button>
<button onclick="playVid()" type="button">播放视频</button>
<button onclick="pauseVid()" type="button">暂停视频</button>
<button onclick="showFull()" type="button">全屏</button><br />
<span>进度条:</span>
<progress value="0" max="0" id="pro"></progress>
<span>音量:</span>
<input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran"/>
</p>
<script>
var btn=document.getElementsByTagName("button");
var myvideo=document.getElementById("video1");
var pro=document.getElementById("pro");
var ran=document.getElementById("ran");
//关闭声音
function enableMute(){
myvideo.muted=true;
btn[0].disabled=true;
btn[1].disabled=false;
}
//打开声音
function disableMute(){
myvideo.muted=false;
btn[0].disabled=false;
btn[1].disabled=true;
}
//播放视频
function playVid(){
myvideo.play();
setInterval(pro1,1000);
}
//暂停视频
function pauseVid(){
myvideo.pause();
}
//全屏
function showFull(){
myvideo.webkitrequestFullscreen();
}
//进度条展示
function pro1(){
pro.max=myvideo.duration;
pro.value=myvideo.currentTime;
}
//拖动range进行调音量大小
function setvalue(){
myvideo.volume=ran.value/100;
myvideo.muted=false;
}
</script>
</body>
</html>3 Tag, der kein MP4 abspielen kann. Und die Lösung
4. Die Lösung für den H5-Videotag, der nur Ton, aber kein Video abspielen kann
5. IIS MIME ist kein registrierter MP4-Typ, die Lösung für die Unfähigkeit, das Vidoe-Tag zu erkennen
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Audio- und Videosteuerungscodebeispiele für neue H5-Attribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
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
1378
52
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
Soundcore Space One Pro: Anker enthüllt das bisher teuerste Over-Ear-Headset
Jun 26, 2024 pm 03:07 PM
Anker bietet sowohl ein breites Produktportfolio, das nicht nur verschiedene Produktkategorien, sondern auch zahlreiche Produkte innerhalb jeder Kategorie umfasst. Audioprodukte bilden in dieser Hinsicht keine Ausnahme, da Anker auch sehr erschwingliche Headsets anbietet
FiiO CP13 Kassettenspieler kommt im transparenten Retro-Look auf den Markt
Jun 16, 2024 am 09:52 AM
DerFiiOCP13-KassettenspielerwurdeimJanuarangekündigt.JetzterweitertFiiOseinPortfolioumzweineueModelle – einesmiteinerFrontundeinesmiteinertransparentenFront.Letzteres passt nicht nur perfekt zum Retro-Charme des eckigen Designs, sondern auch
Klipsch stellt die Flaggschiff-Soundbar Flexus Core 300 mit 8K-Unterstützung, 12 Lautsprechern und Raumkorrektur vor
Sep 05, 2024 am 10:16 AM
Der Klipsch Flexus Core 300 ist das Topmodell der Serie und positioniert sich über dem bereits verfügbaren Flexus Core 200 im Soundbar-Sortiment des Unternehmens. Laut Klipsch handelt es sich um die erste Soundbar der Welt, deren Klang sich an die Anforderungen anpassen lässt
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
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
Was bedeutet Audio?
Dec 25, 2023 pm 03:41 PM
Unter Audio versteht man die Wellenlänge, Frequenz und Intensität des Schalls. Es handelt sich um ein Signal, das vom menschlichen Gehör wahrgenommen werden kann und durch die Vibration eines Gegenstandes erzeugt wird. Audio liegt normalerweise in Form von Wellenformen vor, die aufgezeichnet, gespeichert, übertragen und wiedergegeben werden können. Audio ist eine wichtige Multimedia-Information, die in verschiedenen Bereichen verwendet wird. Mit der Entwicklung der digitalen Technologie ist digitales Audio zu einer Mainstream-Technologie in den Bereichen moderner Musikproduktion und -ausstrahlung geworden. Gleichzeitig sind Audioverarbeitung und Digitalisierung auch eine der wichtigen Richtungen moderner Audiotechnologie. Sie können die Klangqualität verbessern, die Klangklarheit erhöhen und die Klangausdruckskraft steigern.
Doogee S Punk: Robustes Smartphone mit leistungsstarken Lautsprechern, konfigurierbaren LEDs und 10800-mAh-Akku
Jun 14, 2024 am 09:12 AM
Doogee wird demnächst ein neues Smartphone mit einem Alleinstellungsmerkmal in Form eines großen Lautsprechers auf der Rückseite anbieten
