插入视频的方法有很多种，但是有一些方法不兼容。

方法1：DW插入视频
利用DW插入的视频为flv格式，操作较简单，但是代码复杂，需要浏览器支持flash插件；火狐浏览器需要手动下载flash插件，比较麻烦。
DW插入代码采用<obeject></object>的方法来插入视频；

方法2：<embed src=""></embed> 嵌入式插入视频
查阅资料显示，embed属于嵌入式插入文件，不仅仅只是插入视频，音频等媒体都可以通过embed插入；embed插入视频，它自己会自带一个编译的swf。embed不好控制；

此方法用的比较少，在这次的弹出框中插入视频使用embed插入视频，视频播放不了；比较麻烦；

【推荐】方法3：H5标签video插入；
通过H5的新标签video直接插入视频。

<div style="margin-top:-25px;" id="video">

<video class="video-js vjs-default-skin" controls="controls" preload="auto" width="854px" height="480px" poster="images/s12_video-english.jpg" data-setup="{}">

<source src="video/s12_video-english.mp4" type="video/mp4" />

<source src="video/s12_video-english.webm" type="video/webm" />

<source src="video/s12_video-english.ogv" type="video/ogg" />

</video>

</div>

注：controls： 视频播放控制台；（可以不用再需要引用额外的JS代码来调控播放/暂停等按钮。不过如果是设计上为了美观，可以引用JS来控制。video标签提供了更多的API来控制）

preload="auto" 页面加载完成后立即开始加载视频；如果设置为preload="meta" 则只加载视频元数据。

poster="images/s12_video-english.jpg" 视频缩略图；

在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ，可以让页面在高分辨率的手机上显示正确的尺寸，防止因为屏幕像素高而使得页面元素变得很小。

通过video标签插入视频，最好是再引入一个视频插件；目前通过使用video.js视频插件比较方便。

video.js视频插件的使用方法也很简单。先下载video.js/video-js.css两个文件放置到自己项目中的相应路径。然后在页面头部引入就行。

接下来就是在video标签中引入video插件中的“ video-js vjs-default-skin”类；
引入MP4，webm,ogv三种视频文件格式，video.js插件会根据浏览器自动判别适合的格式来播放。兼容性比较强；

问题1：video.js在video标签中需要引入一个data-setup="{}"，这个是代表什么？看了bootstrap视频课之后，我大致的猜测这是一个接口，引入相应的代码；在这次的使用的，如果去掉代码中的{}，视频播放窗口就会出现问题。查看资料，有的人没有加{}也可以使用，但是有的人使用时也需要加{}。这个问题还需要继续研究，查找答案。

H5插入视频兼容主浏览器的更多相关文章

  1. 页面中插入视频兼容ie8以上的浏览器

    有时候页面中需要插入视频,如果不考虑ie8的话:就是直接用h5标签<video></video>就可以了: 但是有的时候需求是需要考虑ie8,这样我们就可以用插件,这种vide ...

  2. h5专题应该兼容那些浏览器？

    本人做专题还不算很多,但是也很腻烦了.一般一个专题制作也就3天,可是调试得4/5天.除了销售客户各种无休止的改改改.还有一点很重要就是浏览器的兼容性.刚开始做专题的时候天真的以为苹果只要兼容到ipho ...

  3. requestNextAnimationFrame兼容主浏览器方法

    window.requestNextAnimationFrame = (function () { var originalRequestAnimationFrame = undefined, wra ...

  4. [转载]html5直接在网页上播放视频音频兼容所有浏览器

    文章给大家分享一个html5直接在网页上播放视频兼容所有浏览器,有需要的同学可参考. HTML5可以用video标签来播放视频 当前,video 元素支持三种视频格式: 格式 IE Firefox O ...

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

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

  6. HTML中插入视频

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

  7. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  8. 【Selenium05篇】python+selenium实现Web自动化：读取ini配置文件,元素封装,代码封装,异常处理,兼容多浏览器执行

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第五篇博 ...

  9. h5嵌入视频遇到的bug及总结

    最近做的一个h5活动因为嵌入视频而发现了好多以前从未发现的问题,在测试的时候不同系统不同版本不同环境等多多少少都出现了些问题,搞得我也是焦头烂额的,不过好在最终问题都解决了,自己也学到了好多东西,为了 ...

随机推荐

  1. Tomcat8.5安装教程

    如果第一次安装的用户请耐心阅读哈安装方法1.下载完成后开始安装,第一次安装的用户建议直接点击“next”不选择插件2.可以自行设置账户名以及密码3.非常重要的一步!!!!!!!!!设置jdk安装目录, ...

  2. ssh免密码登录、secureCRT免密码登录详解

    再放一张真机实现图: 接下来就详细讲述实现细节. 实现过程中吃了不少苦头,这个不对,那个不通.好在慢慢一点点摸索出来了,经验分享在这里. 希望能终结网上ssh免密码登录,以及SecureCRT免密码登 ...

  3. 对IOC的理解

    我觉得 IOC 主要分两块去理解,  第一块 IOC是干什么的, 为什么需要IOC ?; 第二块,IOC 这么好,该怎么用? 一: 为什么需要IOC? 回答这个问题就要从ioc的含义入手:  IOC ...

  4. UVA - 11995 模拟

    #include<iostream> #include<cstdio> #include<algorithm> #include<cstdlib> #i ...

  5. SQL里的real类型和tinyint类型在C#里分别对应类型

  6. 【KMP】【字符串】KMP字符串匹配算法 学习笔记

    一.简介     KMP是由Knuth.Morris和Prat发明的字符串匹配算法,它的时间复杂度是均摊\(O(n+m)\).其实用Hash也可以做到线性,只不过Hash存在极其微小的难以避免的冲突. ...

  7. Tarjan算法打包总结（求强连通分量、割点和Tarjan-LCA）

    目录 Tarjan打包总结(求强连通分量.割点和Tarjan-LCA) 强连通分量&缩点 原理 伪代码 板子(C++) 割点 原理 伪代码 最近公共祖先(LCA) 原理 伪代码 板子 Tarj ...

  8. 关于vue2非表单元素使用contenteditable="true"实现textarea高度自适应

    <template> <div ref="sendContent" contenteditable="true" v-html="s ...

  9. 用淘宝镜像安装electron的方法

    在网友那里看到的,命令如下,亲测安装electron 1.7.9 成功,关键是几秒钟就搞定了.今天是 11 Dec 2017. ELECTRON_MIRROR=http://npm.taobao.or ...

  10. ELK 插件(一) ---- head

    一, 插件介绍 01, ElasticSearch Head是什么? ElasticSearch Head是集群管理.数据可视化.增删查改.查询语句可视化工具.可以对集群进行傻瓜式操作.你可以通过插件 ...