Heim > Artikel > Web-Frontend > 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

黄舟Original: 2017-05-19 16:53:251782Durchsuche

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:

Ausführliche Erläuterung der Audio- und Videosteuerungscodebeispiele für neue H5-Attribute

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 (current Time ) 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");

Weisen Sie dem Video das Audioattribut zu: video.volume=range.value/100;

Zu diesem Zeitpunkt können Sie einfach den Bereich ziehen, um die Lautstärke des Videos zu steuern .

Dann müssen Sie beurteilen, ob der vorherige Ton ausgeschaltet ist. Die beiden Ereignisse sind unabhängig

. Daher müssen Sie beurteilen, ob er im Drag-Ereignis stummgeschaltet ist zu falsch.

Der endgültig implementierte Code lautet wie folgt:

Ausführliche Erläuterung der Audio- und Videosteuerungscodebeispiele für neue H5-Attribute

[Verwandte Empfehlungen]

Detaillierte Erläuterung von das Video-Tag der HTML5-Testanwendung

<!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>

2.Verwenden Sie das Videoelement in HTML 5, um einen Videoplayer zu erstellen

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!

Stellungnahme：

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

Vorheriger Artikel：Ausführliche Erläuterung der gemeinsamen Nutzung von Beispielcode zum Erstellen dynamischer Partikelgitteranimationen mit HTML5 CanvasNächster Artikel：Ausführliche Erläuterung der gemeinsamen Nutzung von Beispielcode zum Erstellen dynamischer Partikelgitteranimationen mit HTML5 Canvas

In Verbindung stehende Artikel

Mehr sehen