有时候页面中需要插入视频，如果不考虑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. 在GridView中实现换页确认功能

    首先看效果: 废话不多说,直接贴代码: <asp:GridView ID="GridView1" runat="server" AllowPaging=& ...

  2. CF 980D Perfect Groups（数论）

    CF 980D Perfect Groups(数论) 一个数组a的子序列划分仅当这样是合法的:每个划分中的任意两个数乘积是完全平方数.定义a的权值为a的最小子序列划分个数.现在给出一个数组b,问权值为 ...

  3. InfoQ —— 百度搜索速度优化

    本篇源自InfoQ —— <百度搜索速度优化> 好多名词不了解... 相关文档下载链接 背景 许霞,毕业于浙江大学.08年加入百度运维部. 本篇讲座主要讲述百度关于速度的优化,包括PC端和 ...

  4. 我的省选 Day -10

    Day -10 今天的分数也许会比昨天更低.. 感觉2017年比远古时代的2007年的第一试难诶. 估个分数好了,我猜88分(为什么猜了一个这么吉利的数字??到时候出来没几分就啪啪啪打脸了) 和昨天一 ...

  5. IdentityServer4 学习笔记[1]-客户端授权

    前言 本文内容来自IdentityServer4官网,官网有详细的介绍,并且有源码Demo 官网源码例子传送门 建立授权服务端 我们暂时不配置Https,选择空模板建立项目,项目建立后, 为了查看de ...

  6. HDU1272-小希迷宫

    题目链接:点击打开链接 Problem Description 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首 ...

  7. k8s yaml文件详解

    1.yaml格式的Pod配置文件内容及注解 深入Pod之前,首先我们来了解下Pod的yaml整体文件内容及功能注解. 如下: # yaml格式的pod定义文件完整内容: apiVersion: v1 ...

  8. promise封装小程序的请求类（request，清爽易懂）

    话不多说直接上代码,清爽易懂: import { config } from '../config.js' const tips = { 1:'抱歉出现了一个错误', 2:'网络错误', 1005:' ...

  9. 从输入URL到浏览器显示页面

    去看经典是不会错的,如果觉得太长,那就休息一下继续看. 经验告诉我,读一篇经典足矣,不要浪费时间去搜索其他地方到处复制粘贴的博文. 所以奉上我过滤的经典: 1.How browser work 2.h ...

  10. Luogu P1967 货车运输 倍增+最大生成树

    看见某大佬在做,决定补一发题解$qwq$ 首先跑出最大生成树(注意有可能不连通),然后我们要求的就是树上两点间路径上的最小边权. 我们用倍增的思路跑出来$w[u][j]$,表示$u$与的它$2^j$的 ...