html video标签 mp3,html5中的video标签和audio标签详解

一、基础

src 音乐资源的路径

autoplay 播放

controls　控制面板

loop 循环播放

muted 初始静音

audio支持的音乐格式有mp3 ogg wav

你的浏览器太辣鸡了，不支持audio标签

选择不同的文件格式

source标签为ａｕｄｉｏ提供音乐资源，并且可以指定多种类型的音乐资源

video标签支持的文件类型　mp4 ogg webm

width height 是设置播放界面大小的，通常情况下只会指定一方的值，然后等比缩放

poster,当视频链接出现问题，或者网络延迟加载慢时，显示的一张占位图片

你的浏览器太拉基了，不支持video标签

video的播放控制条去掉

video::-webkit-media-controls-enclosure {

display: none !important;

}

var myVideo=document.getElementById("video");

var btn=document.getElementById("button");

btn[0].click=function(){

myVideo.muted=true;(是否静音：是)

}

btn[1].click=function(){

myVideo.muted=false;(是否静音：否)

}

btn[2].click=function(){

myVideo.play();(播放)

}

btn[3].click=function(){

myVideo.pause();(停止播放)

}

btn[4].click=function(){

myVideo.webkitrequestFullscreen();(全屏显示)

}

如何设置进度条和视频的播放时长

(1)、需要获取视频的总时长(duration)赋值给进度条的最大值，progress.max=video.duration;

(2)、需要获取当前视频播放的当前时间位置(currentTime)赋值给当前进度条的长度，progress.value=video.currentTime;

然后在视频播放的同时，要保证进度条的值能够及时获取到视频的时长和当前播放时间位置。

需要开一个定时器setInterval(pro，100);：就是说在1毫秒获取一次视频的数值赋值给progress进度条，这样就能保证及时性。

这样进度条就能和视频的准确的同步了。

如何用表单元素 range属性控制视频的音量大小

首先需要获取到range的value值，赋给视频的音量上去，才能控制视频的音量大小，

var ran=document.getElementById("range");

获取range.value,

赋值给video的音频属性:video.volume=range.value/100;

这时候就能实现简单拖动range而控制视频的音量了。

然后还需要进去前面的声音关闭判断，两则是独立的事件，所以，需要在拖动事件中进行判断是否是静音muted，然后在进行muted设置为false。

截屏图片

html video标签 mp3,html5中的video标签和audio标签详解相关推荐

oracle em中查看jiob,HTML5 中的 b/strong、i/em 详解
这篇文章主要聊一聊 HTML5 中的和 ,以及和 . 从页面显示效果来看,被和包围的文字将会被加粗,而被和包围的文字将以斜体的形式呈现.那大家可能就会疑惑了,既然效果一样,那为什么还要重复 ...
ie8 html 语音标签,让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本在里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. ②又要无休止的找ie8的解决方法,自 ...
html中video标签用法,HTML中的video标签怎么用
HTML中的video标签怎么用发布时间:2020-06-23 19:41:21 来源:亿速云阅读:111 作者:Leah 这篇文章运用简单易懂的例子给大家介绍HTML中的video标签的使用方法 ...
php 修改 wordpress,修改WordPress中文章编辑器的样式的方法详解
这篇文章主要介绍了修改WordPress中文章编辑器的样式的方法详解,同时文中也推荐了两款取代默认文章编辑器的插件,需要的朋友可以参考下自定义文章编辑器的样式每一个 WordPress 主题的文章样 ...
python爬取图片-Python爬取网页中的图片（搜狗图片）详解
前言最近几天,研究了一下一直很好奇的爬虫算法.这里写一下最近几天的点点心得.下面进入正文: 你可能需要的工作环境: Python 3.6官网下载本地下载我们这里以sogou作为爬取的对象. 首先 ...
HTML5 多图片上传（前端+后台详解）
HTML5 多图片上传(前端+后台详解) 1.参考jquery插件库 2.修改代码 3.添加的后台代码 4.删除的后台代码 1.参考jquery插件库手机端实现多图片上传 2.修改代码我发现他这里 ...
props传递对象_vue组件中使用props传递数据的实例详解
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法组件不仅仅是 ...
mysql如何限制数据修改密码_MySQL_MySQL数据库中修改密码及访问限制设置详解，MySQL是一个真正的多用户、多 - phpStudy...
MySQL数据库中修改密码及访问限制设置详解 MySQL是一个真正的多用户.多线程SQL数据库服务器.MySQL是以一个客户机/服务器结构的实现,它由一个服务器守护程序mysqld和很多不同的客户程序 ...
php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解一.设定文字字体.颜色.大 ...

html video标签 mp3,html5中的video标签和audio标签详解

html video标签 mp3,html5中的video标签和audio标签详解相关推荐

最新文章

热门文章