有时候页面中需要插入视频，如果不考虑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以上的浏览器的更多相关文章

  1. 页面中插入视频的方法---video/embed/iframe总结

    1. video标签 当前主流的方法当然是HTML5中的video标签了,但是 当前,video 元素只支持三种视频格式: Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg ...

  2. Discuz常见大问题-如何允许用户插入视频-如何自己在页面中插入视频

    从视频的下面分享中获取html代码 然后粘贴到你创建页面的指定位置(注意从优酷复制的视频宽度和高度可能比较小,你可以自己调整,或者占据100%) 最终的实现效果

  3. 【转】向HTML中插入视频并兼容所有浏览器的方法

    原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...

  4. H5插入视频兼容主浏览器

    插入视频的方法有很多种,但是有一些方法不兼容. 方法1:DW插入视频利用DW插入的视频为flv格式,操作较简单,但是代码复杂,需要浏览器支持flash插件:火狐浏览器需要手动下载flash插件,比较麻 ...

  5. HTML中插入视频

    最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...

  6. 如何在html中插入视频

    如何在html中插入视频 1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性  用mp4格式 <vid ...

  7. JSP 页面中插入图片

    第一步 在 JSP 页面中插入图片 EL 表达式 ${pageContext.request.contextPath } 的值为当前的项目名称 <html> ... <body> ...

  8. 如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

    如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签. <script> 和 </script> 会告诉 JavaScript 在何处 ...

  9. html页面中插入html的标签,JS控制标签属性

    html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...

随机推荐

  1. lable对picbox透明

    为了登录美观一些,就在窗体上加了个picbox.并且充满了整个窗体. 往上面放了几个lable,把lable属性设置Transparent.本想着lable不会有底色,实际上有个底,很难看. 解决办法 ...

  2. C#面向对象三大特性之二：继承

    面向对象的三大特性之一的封装,解决了将对同一对象所能操作的所有信息放在一起,实现统一对外调用,实现了同一对象的复用,降低了耦合. 但在实际应用中,有好多对象具有相同或者相似的属性,比如有一个对象 果树 ...

  3. FUI- 我离钢铁侠还差几步？

    本文来自网易云社区 作者:马宝 什么是FUI本文不累赘的可以自行Google,喜欢科幻的同学们都看一张图就能感受到FUI的魅力. 本文算是一篇所见即所的,可边学边干的原创教程.总结全文就一句话,&qu ...

  4. 洛谷P1024 一元三次方程求解

    P1024 一元三次方程求解 题目描述 有形如:ax3+bx2+cx+d=0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d 均为实数),并约定该方程存在三个不同实根(根的范围在-10 ...

  5. ElasticStack之Elasticsearch集群搭建

    需搭建服务器环境 操作系统 Host:port node 1 CentOS 7.2.1511 11.1.11.127:9200 node1 2 CentOS 7.2.1511 11.1.11.128: ...

  6. kindle资源

    化繁为简!Kindle 漫画和电子书 资源汇总 & 用法 刚入Kindle那会,在网上翻看了不少文章,有的讲怎么下载电子书,有的讲怎么看漫画,有的讲怎么设置推送邮箱…… 好吧,我不想在用Kin ...

  7. APP测试常见功能测试点汇总

    本文总结了一些APP功能测试中经常遇见测试点,仅供参考,是好早以前看哪位前辈总结的,一直在使用,所以也稍微的修改了下放到自己的博客中,以备日后温习.1.安装和卸载安装和卸载是任何一款APP中都属于最基 ...

  8. 练习十一：兔子数量计算—斐波那契实例

    题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子, 假如兔子都不死,问每个月的兔子总数为多少? 通过数学分析我们知道,兔子的规律为数列1,1,2 ...

  9. 02------css选择器

    css的选择器:1.基本选择器 2.高级选择器 基本选择器包含: 1.标签选择器标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某 ...

  10. (转)Linux命令学习总结：dos2unix - unix2dos

    Linux命令学习总结:dos2unix - unix2dos 命令简介: 原文:http://www.cnblogs.com/kerrycode/p/5077969.html dos2unix是将W ...