html5 video标签嵌入视频
前面谈到了网页怎么嵌入flash视频,就想到了另一个问题,flash格式视频在手机上播放,需要手机安装flash播放插件,而且flash视频绝对无法在苹果手机上播放,因为苹果对flash的不支持,导致现在flash前景堪忧。当然目前已经有些插件可以支持苹果手机播放flash视频。
这里就要谈一谈html5的video标签了。html5功能的强大是毋庸置疑的,而且作为一款为苹果量身定做的前端技术,现在html5对各浏览器的支持也越来越好,在手机端的支持也是让我觉得没有什么可以相比的。
在html5中嵌入视频非常简单,仅仅只需要如下代码就可以实现了:
<video id="media" width="720" height="400" controls>
<source src="http://minkbooks.com/content/trailer.mp4">
<source src="http://minkbooks.com/content/trailer.ogg">
</video>
html5标签的属性:
- autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
- controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
- height pixels 设置视频播放器的高度。
- loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
- muted muted 规定视频的音频输出应该被静音。
- poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
- preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
- src url 要播放的视频的 URL。
- width pixels 设置视频播放器的宽度。
- <!--video.js html5视频播放器-->
- <link rel="stylesheet" type="text/css" href="assets/lib/css/video-js.css">
- <script src="assets/lib/js/jquery.js"></script>
- t;script src="assets/lib/js/movive/video.js"></script>
- <!--IE低版本支持-->
- t;script src="assets/lib/js/movive/html5media.js"></script>
可以看到有一个html5media.js的类库,这个类库是对IE低版本的支持,大家都知道,IE对html5的支持不太好,这个看项目需求可以加入。直接网上就可以下载。
- <video id="Html5Video" class="video-js vjs-default-skin" preload controls autoplay width="100%"
- poster="assets/images/movie/poster.jpg">
- <source id="src1" src="assets/movie/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
- <source id="src2" src="assets/movie/zhiyan.ogv" type='video/ogg; codecs="theora, vorbis"' />
- <source id="src3" src="assets/movie/linyoujia.webm" type='video/webm; codecs="vp8, vorbis"' />
- 您的浏览器不支持 video 标签。
- </video>
html5支持三种格式的视频:mp4,ogv,和webm。首先要准备一个 mp4 格式的视频(h264),可以在苹果设备中使用;其次要准备 ogv 格式的视频,用在火狐浏览器中;最后要准备一下 webm 格式的视频,这个可以用在谷歌浏览器等。这样就确保支持几乎所有的主流浏览器了。
在这里要重点强调的一点是视频的准备,我们准备mp4,ogv,webm格式的视频,可能会遇见明明是mp4格式的视频,为什么不能播放呢?而且用一些转码软件转码视频给mp4,ogv,webm格式的视频也是无法播放,这里可能是转码的问题,比如:mp4要求是h246,可是按照要求转码后,可能还是无法播放。这里给各位大侠推荐一款视频转换软件,专门为html5量身定做的:Freemake Video Converter。直接转码为html5视频,就会转换给MP4,ogv.webm三种格式的视频,并且会生成相应的代码。
- <script> _V_.options.flash.swf = "assets/lib/js/movive/video-js.swf";</script>
html5 video标签嵌入视频相关推荐
- 使用html5 video标签不自动播放视频问题(静音播放)
谷歌浏览器使用html5 video标签播放视频,已经加上属性 autoplay="autoplay" 却不自动播放,需要加上muted 静音才可以自动播放.但是问题是没有声音. ...
- HTML5 向网页嵌入视频和音频
来源 | http://www.fly63.com/article/detial/9503 现在很多网站上都会使用到视频和音频,html5 中提供了展示视频和音频的标签.向网页嵌入视频可以使用 < ...
- [HTML5] Video 标签播放及控制视频
Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg.mp4 .webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖. 0x0 预备知识 ...
- html video标签播放直播视频,HTML5 Video 标签播放及控制视频
Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg.mp4.webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖. 0x0 预备知识 不 ...
- html5 video标签不能播放视频,h5 video 视频不能正常播放
在页面中用video标签嵌入了一个视频: 其中 video 的 poster 属性的值和 source 的 src 的值都是存在 json 数组里动态获取的. 这个页面用ios自带的浏览器和qq直接打 ...
- Springboot项目使用html5的video标签完成视频播放功能
Springboot项目使用html5的video标签完成视频播放功能 1.首先引入pom文件: pom.xml 2.使用video标签来播放视频: 3.视频播放功能的具体实现: 文件的上传与下载会另 ...
- html5 video 定位播放,HTML5 video标签的播放控制
这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播放时间和设置播放点.音量的获取和设置等内容,需要的朋友可以参考下 上一篇介绍了html5标签v ...
- 如何使用html5的video标签,关于html5 video标签的使用方法
关于html5 video标签的使用方法 发布时间:2020-07-23 16:39:31 来源:亿速云 阅读:92 作者:清晨 小编给大家分享一下关于html5 video标签的使用方法,希望大家阅 ...
- html标签video资源占用,使用HTML5 video标签的一系列问题
原标题:使用HTML5 video标签的一系列问题 H5标签的video,我想写过前端代码的人,都不会陌生吧.但video标签还是有一些问题. 一.PC端的兼容问题: H5的标签不兼容ie8包括ie8 ...
- html5 video 停止播放视频,html5 video怎么停止播放视频
html5 video停止播放视频的方法:首先使用"document.getElementById("id值")"获取到video对象:然后使用"vi ...
最新文章
- Nutch的安装和配置
- wireshark远程抓包
- android opencv 水印,关于opencv对图片添加水印
- 【Android市场】提交应用的一点经验分享
- oracle扩容bigfile,Oracle10g BIGFILE表空间带来的好处
- c语言排队系统,【分享】C语言 银行取票排队系统
- 一个新的自己从2009年的第一天...
- 29. Divide Two Integers[M]两数相除
- pyqt5 自定义控件_说人话的PYQT5『1』
- 一小时做出Java实战项目——飞翔的小鸟
- 【P2P的Jxta解决之道】
- DWF是个什么格式,要怎么进行相应的格式转换?
- 微信公众平台开发教程新手解惑40则
- python 构建建模无标度网络
- mysql清空数据库的所有数据
- python外国网站爬虫_10分钟教你用python爬取网站信息:这可能是全网最好用的爬虫代码...
- Python3,1行代码,去除图片的背景图,确实香。
- win11彻底卸载微软bing输入法,包括删除输入法状态栏图标
- https://mp.weixin.qq.com/s?__biz=MzkxNTIzODIxNQ==tempkey=MTEwOV9qbGlub091aVlKb1NtOVZKV3lTcHgwd3U0NG
- 那些散落在人间的天使