About the control analysis of H5 new attributes audio and video
This article mainly introduces the detailed control of H5 new attributes audio and video (recommended). It has certain reference value and 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)
<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 are the controls for video files;
javascript lead.
<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 video playback duration
simultaneously.
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 a value to the maximum value of the progress bar, progress.max=video.duration;
(2). You need to obtain the current time position (currentTime) of the current video playback and assign it 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 video duration and 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 range attribute of the form element 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 range.value,
Assign the value to the audio attribute of video: video.volume=range.value/100;
At this time, you can simply drag the range to control the video Volume up.
Then you 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 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>The above is the entire content of this article, I hope it will be helpful to everyone Learning will be helpful. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
How to implement HTML5 page audio and video to automatically play under WeChat and app
HTML5 and jQuery implementation Search smart matching function
The above is the detailed content of About the control analysis of H5 new attributes audio and video. 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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
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
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 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.
Pixel 9 Pro XL vs iPhone 15 Pro Max camera comparison reveals surprising Google wins in video and zoom performance
Aug 24, 2024 pm 12:32 PM
The Google Pixel 9 Pro and Pro XL are Google's answers to the likes of the Samsung Galaxy S24 Ultra and the Apple iPhone 15 Pro and Pro Max. Daniel Sin on YouTube(watch below) has compared the Google Pixel 9 Pro XL to the iPhone 15 Pro Max with some
How to distinguish between H5, WEB front-end, big front-end, and WEB full stack?
Aug 03, 2022 pm 04:00 PM
This article will help you quickly distinguish between H5, WEB front-end, large front-end, and WEB full stack. I hope it will be helpful to friends in need!
Panasonic Lumix S9 supply shortages complete Fujifilm X100VI impersonation act despite bad press
Jun 14, 2024 am 09:36 AM
Sinceitslaunchearlierthisyear,thePanasonicLumixS9hasbeenembroiledincontroversy.BetweenthecornersPanasoniccuttoarriveatsuchasmallbodyandthefusscertaincamerareviewerskickeduponYouTube,itseemedliketheLumixS9wasdoom
A closer look at the video element in HTML
Feb 24, 2024 pm 08:18 PM
Detailed explanation of the video tag in HTML The video tag in HTML5 is a tag used to play videos on web pages. It can render videos using different formats, such as MP4, WebM, Ogg, and more. In this article, we will introduce the use of video tag in detail and provide specific code examples. Basic Structure The following is the basic structure of the video tag:
Snapdragon X Elite CPU performance nearly identical on battery and plugged-in in Vivobook S15 benchmarks
Jun 20, 2024 pm 03:59 PM
Despite the hype surrounding the Qualcomm Snapdragon X Elite, it has been a rather mediocre launch. In our review, we found that the most impressive part of the new Qualcomm Snapdragon X Elite X1E-78-100-powered Asus Vivobook S 15 was the seamlessnes
