html5前端Video视频标签和audio音频标签的使用

h5新特性中关于Video视频标签和audio音频标签的使用和浅谈

一、Video视频标签

video标签是h5新特性中用来播放视频的控件，现在就来详细介绍下如何使用

支持的三种常见格式：mp4、webm、ogv
浏览器差异问题：
火狐、谷歌、欧朋浏览器支持全部格式
safari只支持mp4格式
IE8及以下版本不支持video标签
IE9及以上只支持mp4格式
初使用:

   // src是视频链接地址    controls是视频控制器<video src='xxxx.mp4'  controls ></video>

其他写法：

 //这样写的好处是：可以兼容不同的浏览器支持的视频格式<video  controls ><source src="XXX.mp4"><source src="XXX.webm"><source src="XXX.ogv"></video>

常见的属性

注意：autoplay在谷歌浏览器无法自动播放
poster="图片封面链接"
通过js控制video属性:

   //首先定义video标签：<video src='xxxx.mp4'  controls id="myvideo"></video>//以下是常用的几个<script>var videoNode=document.getElementById("myvideo");videoNode.play();//视频播放videoNode.pause();//视频暂停var videolength=videoNode.duration();//获取视频总时长var nowtime=videoNode.currentTime();//获取播放时长videoNode.addEventListener('ended',function(){//视频结束后触发播放videoNode.play();})videoNode.playbackRate=2;//设置二倍速播放全屏按钮.onclick=function(){//点击全屏播放videoNode.webkitRequestFullscreen();}</script>

二、audio音频标签

audio标签是h5新特性中用来播放音频的控件，现在就来详细介绍下如何使用

支持的三种常见格式：mp3、wav、ogg
浏览器差异问题：
mp3格式所有浏览器都支持
ogg支持谷歌、欧朋、火狐
初使用:

   // src是音乐链接地址    controls是控制器<audio src='xxxx.mp3'  controls ></audio>

其他写法：

 //这样写的好处是：可以兼容不同的浏览器支持的视频格式<audio controls ><source src="XXX.mp3"><source src="XXX.wav"><source src="XXX.ogg"></audio >

常见的属性
与上述video标签的属性一致，用法一样

html5前端Video视频标签和audio音频标签的使用相关推荐

014day(h5的发展史，h5的兼容，h5的语法，h5的语义化，h5的常用标记，百分比下字体居中的两种方法，video视频文件，audio音频文件，
一.h5的发展史 1.HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队. HTML 5 的 ...
20230410----重返学习-网易云音乐首页案例-audio音频标签
day-046-forty-six-20230410-网易云音乐首页案例-audio音频标签网易云音乐首页案例单例设计模式 const theModule = (function(){let th ...
audio 音频标签的使用及实例
audio 音频标签的使用属性值描述 autoplay autoplay 如果出现该属性,则音频在就绪后马上播放. controls controls 如果出现该属性,则向用户显示音频控件(比如 ...
前台页面HTML5的Audio音频标签学习使用
原文链接:http://caibaojian.com/html5-audio.html HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. au ...
H5 audio 音频标签自定义样式修改以及添加播放控制事件
20181023 更新原来的代码拖动进度点只写了mouse事件,手机端的话应该是touch事件.所以出现了有朋友说的移动端无法拖动进度条的问题.现在更新的代码已经加上touch事件,即无论是手机模式 ...
HTML5基础教程（21）Audio(音频)
文章目录导语互联网上的音频浏览器支持 Audio如何工作音频格式及浏览器支持结语导语本篇文章将介绍HTML5 Audio(音频),它为我们提供了播放音频文件的标准. 互联网上的音频直到 ...
vue前端video视频截图与录影功能的简单实现
目录截图:截取图片后可以进行涂鸦编辑,并能清除,撤销. 录影:点击按钮后录制10s左右的视频文件. 文件上传服务器示例最近项目开发中,需要实现在video 视频上截图,录影后将文件上传到阿里云服务 ...
解决audio音频标签在ios系统上失效的办法
这周做了一个h5页面,其中用到了audio标签播放背景音乐,一开始皆大欢喜,在自己的安卓机测完后准备发版的时候想了想还是找个苹果看一下把,果然,一看就出现问题了,背景音乐无法播放,而且自定义的播放按钮 ...
html5插入video视频文件，为什么有声音不显示画面
插入video <video width="560px" height="340px" src="白宇.朱一龙 - 时间飞行~1.mp4&quo ...

html5前端Video视频标签和audio音频标签的使用

html5前端Video视频标签和audio音频标签的使用

一、Video视频标签

二、audio音频标签

html5前端Video视频标签和audio音频标签的使用相关推荐

最新文章

热门文章