html5视频播放(使用HTML5加载音频和视频的实现代码)
html5视频播放
使用HTML5加载音频和视频的实现代码【一、前言】
HTML5 特性,包括原生音频和视频支持而无需 Flash。
HTML5 <audio> 和 <video> 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停媒体。
【二、嵌入视频】
下面是在 Web 页面中嵌入视频文件最简单的形式:
<video src="img/sounds/mu04.mp3" width="300" height="200" controls> Your browser does not support the <video> element. </video>
目前的 HTML5 规范草案还没有指定浏览器应该在 video 标签中支持哪种视频格式。但是最常用的视频格式是:
Ogg:带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。 mpeg4:带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。
我们可以使用带有媒体类型和其他属性的 <source> 标签指定媒体文件。video 元素允许使用多个 source 元素,浏览器会使用第一个认可的格式:
<!DOCTYPE HTML> <html> <body> <video width="300" height="200" controls autoplay> <source src="img/sounds/3.mp4" type="video/ogg" /> <source src="img/sounds/3.mp4" type="video/mp4" /> Your browser does not support the <video> element. </video> </body> </html>
【三、Video 属性规范】
HTML5 video 标签可以使用多个属性控制外观和感觉以及各种控制功能:(参考百度)
【四、嵌入音频】
HTML5 支持的 <audio> 标签用于在如下所示的 HTML 或 XHTML 文档中嵌入语音内容。
<audio src="img/sounds/mu04.mp3" controls autoplay> Your browser does not support the <audio> element. </audio>
当前的 HTML 草案规范还没有指定浏览器应该在 audio 标签中支持哪种音频格式。但是最常用的音频格式是 ogg,mp3 和 wav。
我们可以使用带媒体类型以及其他属性的的 <source> 标签指定媒体。Audio 元素允许使用多个 source 元素,并且浏览器会使用第一个认可的格式:
<!DOCTYPE HTML> <html> <body> <video width="300" height="200" controls autoplay> <source src="img/sounds/mu04.mp3" type="video/ogg" /> <source src="img/sounds/mu04.mp3" type="video/mp4" /> Your browser does not support the <video> element. </video> </body> </html>
Audio 属性规范
HTML5 audio 标签可以使用多个属性来控制外观,感受以及各种控制功能:
【五、JavaScript 处理媒体事件】
HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能:
下面是一个允许播放给定视频的示例:
<!DOCTYPE HTML> <head> <script type="text/javascript"> function PlayVideo(){ var v = document.getElementsByTagName("video")[0]; v.play(); } </script> </head> <html> <body> <form> <video width="300" height="200" src="img/sounds/3.mp4"> Your browser does not support the <video> element. </video> <input type="button" onclick="PlayVideo();" value="Play"/>555555555 </form> </body> </html>
【六、总结】
本文基于html基础,介绍了对音频<audio>标签<video>标签,如何嵌入视频等一系列操作。进行了详细的一些讲解,通过丰富的案例让大家能够更好的去理解HTML的用法,希望可以帮助大家更好的学习。
可以参数自己根据教程,自己加入一些属性,运行看看效果,会有意想不到的收获。
到此这篇关于使用HTML5加载音频和视频的实现代码的文章就介绍到这了,更多相关HTML5加载音频和视频内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
- html5最好用语义元素(HTML5语义化元素你真的用对了吗)
- h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
- html5播放代码(html5 video全屏播放/自动播放的实现示例)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- h5人脸扫描代码(Html5调用手机摄像头并实现人脸识别的实现)
- html5显示中心代码(HTML5中的Web Notification桌面通知功能的实现方法)
- html5视频播放(使用HTML5加载音频和视频的实现代码)
- h5打开小程序点允许(html5跳转小程序wx-open-launch-weapp踩坑)
- html5新增特性(总结html5自定义属性有哪些)
- html5滑动刷新(HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码)
- html5隐藏数字(HTML5去掉输入框type为number时的上下箭头的实现方法)
- html5 拍照上传(Html5在手机端调用相机的方法实现)
- html5弹出窗口(Html5页面上如何禁止手机虚拟键盘弹出)
- html5播放器按菜单键没反应(解决HTML5中的audio在手机端和微信端的不能自动播放问题)
- 如何使用html5的canvas图(html5 canvas实现给图片添加平铺水印)
- html5导航栏怎么设计(html5 横向滑动导航栏的方法示例)
- 全椒人,你还记得吗 那年,那人,那网,那些我们的青春记忆(全椒人你还记得吗)
- 全椒人在苏州10周年联谊会在苏州举办(全椒人在苏州10周年联谊会在苏州举办)
- 这个全椒人被通报表彰,看看你认识吗(这个全椒人被通报表彰)
- 全椒人,38年集体回忆 1980-2018 ,看完不要哭(全椒人38年集体回忆)
- 董元奔吟咏历代文人 1012新旧均可 全椒人张璪 1022 -1093(董元奔吟咏历代文人)
- 泪目 这位 刷屏 的英雄,是全椒人的骄傲(泪目这位刷屏)
热门推荐
- js定时器几分钟执行(利用JS定时器实现元素移动)
- ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解(ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解)
- react 封装下拉选择框(React鼠标多选功能的配置方法)
- 超级小旋风asp服务器软件使用图文教程(超级小旋风asp服务器软件使用图文教程)
- thinkphp5怎么设置默认返回(thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结)
- js中toFixed() 的使用
- dedecms标签调用大全(Dedecms文章标题长度修改方法小结)
- python改变图片的色深设置(Python实现去除图片中指定颜色的像素功能示例)
- 数据库操作题(数据库日常练习题,每天进步一点点2)
- win10怎么安装apache(apache启动失败怎么办 快速解决Win10系统apache启动失败的方法教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9