Web Front-end
H5 Tutorial
Detailed explanation of H5 new attributes audio and video control code examples
Detailed explanation of H5 new attributes audio and video control code examples
This article mainly introduces the control details (recommended) of H5's new attributes audioaudio and videovideo. It has certain reference value. If you are interested Students can learn about it.
This article talks about the control of audio and video, the new attributes of H5, as follows:
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>
The following is the control of video files;
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. How to set the progress bar and the video playback duration
to be synchronized.
As shown in the picture:
Let me talk about it here, first
(1), you need to get the total duration of the video (duration) Assign the maximum value to the progress bar, progress.max=video.duration;
(2), need to obtain the current time position of the current video playback (currentTime ) is assigned to the length of the current progress bar, progress.value=video.currentTime;
Then while the video is playing, it is necessary to ensure that the value of the progress bar can obtain the length of the video and the current playback time position in time.
You need to open a timer setInterval(pro, 100);: that is to say, get the value of the video once every 1 millisecond and assign it to the progress progress bar, so as to ensure timeliness.
This way the progress bar can be accurately synchronized with the video.
4. How to use the form element range attribute to control the volume of the video.
1. First, you need to get the value of the range and assign it to the volume of the video to control the volume of the video.
<input type="range" min="0" value="50" max="100" id="range" />
var ran=document.getElementById("range");Get the range.value,
Assign the audio attribute to the video: video.volume=range.value/100;
At this time, you can simply drag the range to control the volume of the video.
Then you also need to judge whether the previous sound is turned off. The two are independent events. Therefore, you need to judge whether it is muted in the drag event, and then set muted to false.
The final implemented code is as follows;
<!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>[Related recommendations]
1. Detailed explanation of the video tag test application of html5
2. Use the video element to create a video player in HTML 5
3. The problem of sharing a video tag that cannot play mp4 and its solution Solution
4. The solution to the problem that the H5 video tag can only play sound but not video
The above is the detailed content of Detailed explanation of H5 new attributes audio and video control code examples. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
How to fix VIDEO DXGKRNL fatal error in Windows 11
Apr 13, 2023 pm 08:22 PM
Click to enter: ChatGPT Tool Plug-in Navigation Collection Some users complained that their computers frequently crashed with the stop code VIDEO DXGKRNL FATAL ERROR. This particular issue occurs only occasionally and has a bugcheck value of 0x00000113, which indicates a violation in the Microsoft DirectX graphics kernel subsystem, as indicated by the bugcheck value. Usually, the error occurs when a corrupt driver interferes with the normal operation of the graphics card's graphics processor. If you're currently struggling with this specific issue, our article will provide you with a variety of high-quality troubleshooting tips. Below you'll find various methods that other users who encountered the exact same error have used successfully. yes
Soundcore Space One Pro: Anker reveals most expensive over-ear headset to date
Jun 26, 2024 pm 03:07 PM
Anker offers both a broad product portfolio, which not only includes various product categories, but also numerous products within each category. Audio products are no exception in this respect, with Anker offering very affordable headsets as well as
FiiO CP13 cassette player launches with transparent retro look
Jun 16, 2024 am 09:52 AM
TheFiiOCP13cassetteplayerwasannouncedinJanuary.Now,FiiOisexpandingitsportfoliowithtwonewmodels-onewitharedfrontandonewithatransparentfront.Thelatternotonlyperfectlymatchestheretrocharmoftheangulardesign,butalso
Klipsch unveils Flexus Core 300 flagship soundbar with 8K support, 12 speakers and room correction
Sep 05, 2024 am 10:16 AM
The Klipsch Flexus Core 300 is the top model in the series and is positioned above the already available Flexus Core 200 in the company's soundbar line-up. According to Klipsch, this is the first soundbar in the world whose sound can be adapted to th
What does h5 mean?
Aug 02, 2023 pm 01:52 PM
H5 refers to HTML5, the latest version of HTML. H5 is a powerful markup language that provides developers with more choices and creative space. Its emergence promotes the development of Web technology, making the interaction and effect of web pages more Excellent, as H5 technology gradually matures and becomes popular, I believe it will play an increasingly important role in the Internet world.
Motorola Razr 50 Ultra shows up in leaked teaser video with waterproof case and huge secondary display
Jun 20, 2024 pm 09:31 PM
Over the past few weeks, the most important specifications and the euro prices of the Motorola Razr 50 and the Razr 50 Ultra have been leaked. Now the enormously reliable leaker @MysteryLupin was able to publish the teaser video embedded below, which
What does Audio mean?
Dec 25, 2023 pm 03:41 PM
Audio refers to the wavelength, frequency and intensity of sound. It is a signal that can be perceived by the human auditory system and is produced by the vibration of an object. Audio usually exists in the form of waveforms that can be recorded, stored, transmitted, and replayed. ,Audio is an important multimedia information that is ,used in various fields. With the development of digital technology, digital audio has become a mainstream technology in the field of modern music production and broadcasting. At the same time, audio processing and digitization are also one of the important directions of modern audio technology. They can improve sound quality, increase sound clarity, and enhance sound expressiveness.
Doogee S punk: Rugged smartphone with powerful speakers, configurable LEDs and 10800 mAh battery
Jun 14, 2024 am 09:12 AM
Doogeewillsoonbeofferinganewsmartphonewithauniquesellingpointintheformofalargespeakerontheback.Itisclearlynoticeableandvisuallydominatestheback.Themaximumoutputpowerisspecifiedas4watts,andaccordingtothemanufact
