页面中插入视频兼容ie8以上的浏览器
有时候页面中需要插入视频,如果不考虑ie8的话;就是直接用h5标签<video></video>就可以了;
但是有的时候需求是需要考虑ie8,这样我们就可以用插件,这种videojs的插件
使用
- <!DOCTYPE html>
- <html>
- <head>
- <title>Video.js | HTML5 Video Player</title>
- <!-- Chang URLs to wherever Video.js files will be hosted -->
- <link href="video-js.css" rel="stylesheet" type="text/css">
- <!-- video.js must be in the <head> for older IEs to work. -->
- <script src="video.js"></script>
- <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
- <script>
- videojs.options.flash.swf = "video-js.swf";//不兼容h5的浏览器
- </script>
- </head>
- <body>
- <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
- poster="http://video-js.zencoder.com/oceans-clip.png"//还没有开始播放的时候,展示的图片
- data-setup="{}">
- <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
- <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
- <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' />
- <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
- <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
- </video>
- </body>
- </html>
demo:
https://github.com/GainLoss/video-videojs
http://www.jq22.com/jquery-info404
官方文档:
https://github.com/videojs/video.js/blob/stable/docs/index.md
页面中插入视频兼容ie8以上的浏览器的更多相关文章
- 页面中插入视频的方法---video/embed/iframe总结
1. video标签 当前主流的方法当然是HTML5中的video标签了,但是 当前,video 元素只支持三种视频格式: Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg ...
- Discuz常见大问题-如何允许用户插入视频-如何自己在页面中插入视频
从视频的下面分享中获取html代码 然后粘贴到你创建页面的指定位置(注意从优酷复制的视频宽度和高度可能比较小,你可以自己调整,或者占据100%) 最终的实现效果
- 【转】向HTML中插入视频并兼容所有浏览器的方法
原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...
- H5插入视频兼容主浏览器
插入视频的方法有很多种,但是有一些方法不兼容. 方法1:DW插入视频利用DW插入的视频为flv格式,操作较简单,但是代码复杂,需要浏览器支持flash插件:火狐浏览器需要手动下载flash插件,比较麻 ...
- HTML中插入视频
最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...
- 如何在html中插入视频
如何在html中插入视频 1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性 用mp4格式 <vid ...
- JSP 页面中插入图片
第一步 在 JSP 页面中插入图片 EL 表达式 ${pageContext.request.contextPath } 的值为当前的项目名称 <html> ... <body> ...
- 如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。
如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签. <script> 和 </script> 会告诉 JavaScript 在何处 ...
- html页面中插入html的标签,JS控制标签属性
html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...
随机推荐
- “FreeTextBox”控件使用——Word编辑器
前言 在敲牛腩新闻发布系统时,添加新闻修改新闻的时候遇到了Word编辑器控件.它是引用了第三方控件,下面关于怎么引用该控件及其一些简单的使用方法进行分析. 内容 在网上找的该插件"FreeT ...
- 一切从这里起始(左耳听风 ARTS 6号小组 week 1)
ARTS 具体要求: 1.每周至少做一个 leetcode 的算法题2.阅读并点评至少一篇英文技术文章3.学习至少一个技术技巧4.分享一篇有观点和思考的技术文章 1.Algorithm Two Sum ...
- 基于rabbitMQ 消息延时队列方案 模拟电商超时未支付订单处理场景
前言 传统处理超时订单 采取定时任务轮训数据库订单,并且批量处理.其弊端也是显而易见的:对服务器.数据库性会有很大的要求,并且当处理大量订单起来会很力不从心,而且实时性也不是特别好 当然传统的手法还可 ...
- spring data之JDBCTemplate学习笔记
一.spring 数据访问哲学 1.为避免持久化的逻辑分散在程序的各个组件中,数据访问的功能应到放到一个或多个专注于此的组件中,一般称之为数据访问对象(data access object,DAO). ...
- Exadata Smart Flash Logging工作原理
Exadata在V2时代,ORACLE为了进一步拓宽客户人群,除了宣称Exadata适用OLAP系统,同时也适用于OLTP系统,那怎么才能满足OLTP系统的高IOPS要求呢?于是Exadata引入了闪 ...
- Win10创建还原点
Win + E打开任务管理器 右击此电脑,选择属性 单击高级系统设置 选择系统保护 单击系统还原 按照提示操作,OK.
- Nodejs 连接 mysql时报错 Error: Cannot enqueue Query after fatal error
解决办法,参考:https://github.com/chill117/express-mysql-session/issues/18 我们只需在实例化SessionStore的时候,配置useCon ...
- python3+Appium自动化05-xpath定位
概念 xpath定位是一种路径定位方式,主要是依赖于元素绝对路径或者相关属性来定位,但是绝对路径xpath执行效率比较低(特别是元素路径比较深的时候),一般使用比较少.通常使用xpath相对路径和属性 ...
- OpenStack local.conf
# Sample ``local.conf`` for user-configurable variables in ``stack.sh`` # NOTE: Copy this file to th ...
- (转)Web服务器磁盘满故障深入解析
Web服务器磁盘满故障深入解析 原文:http://blog.51cto.com/oldboy/612351 ############################################# ...