详解H5新属性audio音频和video视频的控制代码实例
本篇文章主要介绍了H5新属性audio音频和video视频的控制详解（推荐），具有一定的参考价值，有兴趣的同学可以了解一下。
本文讲诉了H5新属性audio音频和video视频的控制，具体如下：
1.音频（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>
下面是对于视频文件的控制；
javascript引出。
<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.如何设置进度条和视频的播放时长
同步进行。
如图所示:
这里说一下，首先
(1)、需要获取视频的总时长(duration)赋值给进度条的最大值，progress.max=video.duration;
(2)、需要获取当前视频播放的当前时间位置(currentTime)赋值给当前进度条的长度，progress.value=video.currentTime;
然后在视频播放的同时，要保证进度条的值能够及时获取到视频的时长和当前播放时间位置。
需要开一个定时器setInterval(pro，100);：就是说在1毫秒获取一次视频的数值赋值给progress进度条，这样就能保证及时性。
这样进度条就能和视频的准确的同步了。
4.如何用表单元素 range属性控制视频的音量大小。
1、首先需要获取到range的value值，赋给视频的音量上去，才能控制视频的音量大小，
<input type="range" min="0" value="50" max="100" id="range" />
var ran=document.getElementById("range");获取range.value,
赋值给video的音频属性:video.volume=range.value/100;
这时候就能实现简单拖动range而控制视频的音量了。
然后还需要进去前面的声音关闭判断，两则是独立的事件，所以，需要在拖动事件中进行判断是否是静音muted，然后在进行muted设置为false。
最终实现的代码如下；
<!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. 分享一个video标签无法播放mp4的问题以及解决方案
5. IIS的MIME未注册MP4类型，导致无法识别vidoe标签的解决办法
Atas ialah kandungan terperinci 详解H5新属性audio音频和video视频的控制代码实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bagaimana untuk membetulkan ralat maut VIDEO DXGKRNL dalam Windows 11
Apr 13, 2023 pm 08:22 PM
Klik untuk masuk: Koleksi Navigasi Pemalam Alat ChatGPT Sesetengah pengguna mengadu bahawa komputer mereka kerap ranap dengan kod henti VIDEO DXGKRNL FATAL ERROR. Isu tertentu ini berlaku hanya sekali-sekala dan mempunyai nilai semakan pepijat 0x00000113, yang menunjukkan pelanggaran dalam subsistem kernel grafik Microsoft DirectX, seperti yang ditunjukkan oleh nilai pepijat. Biasanya, ralat berlaku apabila pemandu yang rosak mengganggu operasi biasa pemproses grafik kad grafik. Jika anda sedang bergelut dengan isu khusus ini, artikel kami akan memberikan anda pelbagai petua penyelesaian masalah berkualiti tinggi. Di bawah anda akan menemui pelbagai kaedah yang berjaya digunakan oleh pengguna lain yang mengalami ralat yang sama. ya
Soundcore Space One Pro: Anker mendedahkan set kepala over-ear paling mahal setakat ini
Jun 26, 2024 pm 03:07 PM
Anker menawarkan kedua-dua portfolio produk yang luas, yang bukan sahaja merangkumi pelbagai kategori produk, tetapi juga banyak produk dalam setiap kategori. Produk audio tidak terkecuali dalam hal ini, dengan Anker menawarkan set kepala yang sangat berpatutan serta
Pemain kaset FiiO CP13 dilancarkan dengan rupa retro telus
Jun 16, 2024 am 09:52 AM
Pemain kaset FiiOCP13diumumkan pada Januari. Kini, FiiOisexmeningkatkan folio sukan dengan dua model baharu-satu di hadapan dan satu dengan bahagian depan telus. Keduanya sangat sepadan dengan reka bentuk sudut yang lain, tetapi juga
Klipsch memperkenalkan bar bunyi utama Flexus Core 300 dengan sokongan 8K, 12 pembesar suara dan pembetulan bilik
Sep 05, 2024 am 10:16 AM
Klipsch Flexus Core 300 ialah model teratas dalam siri ini dan diletakkan di atas Flexus Core 200 yang sedia ada dalam barisan bar bunyi syarikat. Menurut Klipsch, ini adalah bar bunyi pertama di dunia yang bunyinya boleh disesuaikan dengan th
Apakah maksud h5?
Aug 02, 2023 pm 01:52 PM
H5 merujuk kepada HTML5, versi terkini HTML H5 ialah bahasa penanda yang berkuasa yang menyediakan pembangun dengan lebih banyak pilihan dan ruang kreatif Kemunculannya menggalakkan pembangunan teknologi Web dan menjadikan interaksi dan kesan halaman web lebih Cemerlang, sebagai teknologi H5. secara beransur-ansur matang dan menjadi popular, saya percaya ia akan memainkan peranan yang semakin penting dalam dunia Internet.
Motorola Razr 50 Ultra muncul dalam video penggoda yang bocor dengan sarung kalis air dan paparan sekunder yang besar
Jun 20, 2024 pm 09:31 PM
Sejak beberapa minggu lalu, spesifikasi paling penting dan harga euro bagi Motorola Razr 50 dan Razr 50 Ultra telah dibocorkan. Kini pembocor yang sangat dipercayai @MysteryLupin dapat menerbitkan video penggoda yang dibenamkan di bawah, yang
Apakah maksud Audio?
Dec 25, 2023 pm 03:41 PM
Audio merujuk kepada panjang gelombang, kekerapan dan keamatan bunyi. Ia adalah isyarat yang boleh dilihat oleh sistem pendengaran manusia dan dihasilkan oleh getaran objek. Audio biasanya wujud dalam bentuk gelombang yang boleh dirakam, disimpan, dihantar dan dimainkan semula. ,Audio ialah maklumat multimedia penting yang ,digunakan dalam pelbagai bidang. Dengan perkembangan teknologi digital, audio digital telah menjadi teknologi arus perdana dalam bidang pengeluaran dan penyiaran muzik moden. Pada masa yang sama, pemprosesan dan pendigitalan audio juga merupakan salah satu hala tuju penting teknologi audio moden Mereka boleh meningkatkan kualiti bunyi, meningkatkan kejelasan bunyi dan meningkatkan ekspresi bunyi.
Doogee S punk: Telefon pintar lasak dengan pembesar suara berkuasa, LED boleh dikonfigurasikan dan bateri 10800 mAh
Jun 14, 2024 am 09:12 AM
Doogee akan segera menawarkan telefon pintar dengan mata jualan yang unik dalam bentuk pembesar suara di belakang. Ia jelas dapat dilihat dan secara visual menguasai bahagian belakang. Kuasa keluaran maksimum ditentukan sebagai 4watt, dan mengikut pembuatan
