返回顶部
首页 > 资讯 > 前端开发 > JavaScript >HTML中新属性audio和video怎么用
  • 896
分享到

HTML中新属性audio和video怎么用

2024-04-02 19:04:59 896人浏览 薄情痞子
摘要

这篇文章给大家分享的是有关html中新属性audio和video怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体如下: 1.音频(audio)<audio

这篇文章给大家分享的是有关html中新属性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.如何设置进度条和视频的播放时长

同步进行。

如图所示:

HTML中新属性audio和video怎么用

这里说一下,首先

(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。

HTML中新属性audio和video怎么用

最终实现的代码如下; 

<!DOCTYPE html> 
<html> 
<body> 
<video id="video1" controls="controls" width="400px" height="400px">
<source src="img/1.mp4">
</video>

<div>
<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"/>
</div>

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

感谢各位的阅读!关于“HTML中新属性audio和video怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: HTML中新属性audio和video怎么用

本文链接: https://www.lsjlt.com/news/80970.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • HTML中新属性audio和video怎么用
    这篇文章给大家分享的是有关HTML中新属性audio和video怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体如下: 1.音频(audio)<audio...
    99+
    2024-04-02
  • H5新属性audio音频和video视频怎么用
    这篇文章将为大家详细讲解有关H5新属性audio音频和video视频怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 1.音频(audio)<audio&nbs...
    99+
    2024-04-02
  • html5声频audio和视频video的属性是什么
    这篇文章主要介绍“html5声频audio和视频video的属性是什么”,在日常操作中,相信很多人在html5声频audio和视频video的属性是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操...
    99+
    2024-04-02
  • html中Video height属性的作用是什么
    在HTML中,`height`属性用于指定`<video>`元素的高度。它定义了视频播放区域的垂直尺寸,以像素(px)为...
    99+
    2023-10-12
    HTML
  • 怎么使用h5新增的audio与video标签
    本篇内容主要讲解“怎么使用h5新增的audio与video标签”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用h5新增的audio与video标签”吧! ...
    99+
    2024-04-02
  • HTML5的audio标签和video标签怎么使用
    这篇文章主要介绍了HTML5的audio标签和video标签怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML5的audio标签和video标签怎么使用文章都会有所...
    99+
    2024-04-02
  • HTML5 中怎么利用Video/Audio播放本地文件
    这期内容当中小编将会给大家带来有关HTML5 中怎么利用Video/Audio播放本地文件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。代码如下:<html>...
    99+
    2024-04-02
  • html中video标签怎么用
    html 中的 video 标签用于嵌入和播放视频内容,通过在 html 代码中添加 即可使用。该标签支持 mp4、webm 和 ogg 等视频格式,并可使用 controls 属性添...
    99+
    2024-04-27
  • HTML中id属性怎么用
    这篇文章主要介绍HTML中id属性怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 下面的 HTML 代码中,id 属性为 red 的 p 元素浮现为赤色,而 id 属性为 g...
    99+
    2024-04-02
  • html中hover属性怎么用
    html中hover属性的使用方法:可以在选择鼠标指针浮动在上面的元素中使用,例如在html中添加以下语法格式“标签选择器:hover{样式代码;}”格式进行使用,共有4种使用方式比如:1、直接在悬浮元素上改变样式;2、改变子元素的样式;3...
    99+
    2024-04-02
  • video下autoplay属性无效怎么办
    小编给大家分享一下video下autoplay属性无效怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!背景:video下载入ogg格式视频,并设置自动播放属性...
    99+
    2023-06-09
  • HTML中button autofocus属性怎么用
    这篇文章将为大家详细讲解有关HTML中button autofocus属性怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 在html 5中,可以设置当页面加载时,...
    99+
    2024-04-02
  • HTML中selectedIndex属性怎么使用
    selectedIndex属性用于设置或返回下拉列表中被选项的索引号。要设置selectedIndex属性的值,可以使用以下两种方式...
    99+
    2023-09-13
    HTML
  • 怎么在html中停止audio
    本篇文章给大家分享的是有关怎么在html中停止audio,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。在html中,可以使用puase方法实现audio停止,语法格式为“对象....
    99+
    2023-06-15
  • HTML表格中的colspan和rowspan属性怎么用
    这篇“HTML表格中的colspan和rowspan属性怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我...
    99+
    2024-04-02
  • html的audio标签怎么用
    这篇文章将为大家详细讲解有关html的audio标签怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。     实例    ...
    99+
    2024-04-02
  • HTML align属性怎么用
    这篇“HTML align属性怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML...
    99+
    2024-04-02
  • html属性怎么使用
    今天小编给大家分享一下html属性怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。class属性class属性用于指定...
    99+
    2023-07-06
  • Html5中video标签有哪些属性和方法
    这篇文章主要介绍“Html5中video标签有哪些属性和方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Html5中video标签有哪些属性和方法”文章能帮助大家...
    99+
    2024-04-02
  • HTML中,src属性和href属性有什么区别?
    src属性和href属性是在HTML中常用的属性,用于指定网页中外部资源的引用。虽然它们都可以用来引用外部资源,但在使用和功能上却有着不同的用途。首先,src属性用于指定外部资源在网页中的嵌入方式,常用于引入图片、音频、视频等媒体文件,以及...
    99+
    2023-12-28
    html 区别 href src
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作