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

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

黄舟

Freigeben： 2017-05-19 16:53:25

Original

1809 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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");

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!