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

您所在的位置：网站首页 › html5video标签销毁 › html5前端Video视频标签和audio音频标签的使用

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

2024-03-14 11:26| 来源: 网络整理| 查看: 265

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

一、Video视频标签

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

支持的三种常见格式：mp4、webm、ogv浏览器差异问题：火狐、谷歌、欧朋浏览器支持全部格式 safari只支持mp4格式 IE8及以下版本不支持video标签 IE9及以上只支持mp4格式初使用: // src是视频链接地址 controls是视频控制器其他写法： //这样写的好处是：可以兼容不同的浏览器支持的视频格式常见的属性

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

//首先定义video标签： //以下是常用的几个 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(); } 二、audio音频标签

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

支持的三种常见格式：mp3、wav、ogg浏览器差异问题： mp3格式所有浏览器都支持 ogg支持谷歌、欧朋、火狐初使用: // src是音乐链接地址 controls是控制器其他写法： //这样写的好处是：可以兼容不同的浏览器支持的视频格式常见的属性与上述video标签的属性一致，用法一样

【本文地址】

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

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

今日新闻

推荐新闻