向HTML中插入视频并兼容浏览器

这篇文章主要介绍了关于CSS自定义绿色复选框按钮的样式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些,后者兼容性让人头疼

最常用的向HTML中插入视频的方法有两种,一种是古老的标签,一种是html5中的标签。
前者的兼容性没得说,但是使用起来不太方便,后者使用起来很方便,但是兼容性让人头疼。
虽然后者兼容性存在很多问题,但是因为使用很方便,符合未来网页设计发展的趋势,因此我们以后者为主要的插入视频的方法,因为它兼容性的问题,前者作为辅助。
示例如下: 

当前,video 元素支持三种视频格式:
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
注:格式必须符合上面三条详细要求,比如MPEG 4,必须是H.264视频和AAC音频。
在这种情况下,如果视频格式正确,大部分浏览器的兼容性结果我们还算满意,但是IE678不支持它,并且人家的用户至今在中国还是十分庞大的群体,我们就必须想到另外一个解决方案支持它们: 

          

这里面引入了一些文件,除了flv格式的视频,还有几个swf或js文件,都是用DW软件生成的,不想研究标签的朋友去DW软件生成就行,如果可以巧妙的融合
这两段代码就可以得到兼容所有主流浏览器的终极代码了。
于是我们可以这样:
用jquery判断浏览器是否为IE(不用判断具体IE版本,因为服务器的原因IE很可能高版本也不通过,暂且IE全部用标签),根据版本加载不同的标签,代码如下: 

  if($.browser.msie){ document.write(''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''); }else{ document.write(''); } 

不要忘记在写这段代码之前引入jquery文件
到此为止,就可以编写兼容所有浏览器的HTML视频代码了。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

html5实现兼容各大浏览器的播放器的解析

关于H5新属性audio音频和video视频的控制解析

如何实现HTML5页面音视频在微信和app下自动播放

以上就是向HTML中插入视频并兼容浏览器的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1546314.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 18:06:20
下一篇 2025年12月21日 18:06:29

相关推荐

  • 使用Html制作简单登录页面的方法

    这篇文章主要为大家详细介绍了html制作简单而漂亮的登录页面具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先来看看样子。 html源码: Login Login 登录 css代码: 立即学习“前端免费学习笔记(深入)”; html{ width: 100%; height: 100%;…

    2025年12月21日
    000
  • 如何使用JS中DOM来控制HTML元素

    这篇文章主要介绍了js中使用dom来控制html元素的相关资料,需要的朋友可以参考下 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~` 例: hello hello hello function getName(){ …

    2025年12月21日
    000
  • HTML实现网页动态时钟

    本文通过实例代码给大家介绍了html写一个网页动态时钟效果,需要的的朋友参考下吧 用html写一个动态网页时钟,代码如下所示: 时钟特效 function disptime(){ var today=new Date(); var hh=today.getHours(); var mm=today.…

    2025年12月21日
    000
  • HTML的表格布局

    这篇文章主要介绍了html表格布局实际使用详解,是html入门学习中的基础知识,需要的朋友可以参考下 什么时候会用到表格 现在,表格 一般不再用于网页整体的布局。不过,在面对某些特定的设计,如表单输入、数据呈现时,表格则可能是最恰当的选择。 关于表格的直观印象,就是由多个单元格(cell)整齐排列而…

    2025年12月21日 好文分享
    000
  • HTML的a标签href属性指定相对路径与绝对路径的用法讲解

    href是链接前端文件的一个最常用的重要属性,这里我们就来看一下html的a标签href属性指定相对路径与绝对路径的用法讲解,需要的朋友可以参考下 在实际Web开发中,插入图片、包含CSS文件等都需要有路径,如果文件路径的添加错误,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。很多初…

    好文分享 2025年12月21日
    000
  • Html 实现动态显示颜色块的报表效果(实例代码)

    本文通过实例代码讲解如何使用html的颜色块动态展示数据功能,非常不错,代码简单易懂,需要的朋友参考下 利用html的颜色块动态展示数据 *{ padding: 0; margin: 0; } .tubiao,.jihua,.shiji,.riqi{ width: 100%; overflow: h…

    好文分享 2025年12月21日
    000
  • JS实现加载时锁定HTML页面元素的方法

    这篇文章主要介绍了js实现加载时锁定html页面元素的方法,涉及javascript针对页面元素的遍历与属性操作相关实现技巧,需要的朋友可以参考下 本文实例讲述了JS实现加载时锁定HTML页面元素的方法。分享给大家供大家参考,具体如下: 在html加载时js锁定页面内所有input,textarea…

    好文分享 2025年12月21日
    000
  • JS实现改变HTML上文字颜色和内容的方法

    这篇文章主要介绍了js实现改变html上文字颜色和内容的方法,涉及js数学运算与页面元素动态操作相关技巧,需要的朋友可以参考下 本文实例讲述了JS实现改变HTML上文字颜色和内容的方法。分享给大家供大家参考,具体如下: 1. JavaScript Day 1 // to change the col…

    2025年12月21日
    000
  • html中table表格的内容水平和垂直居中显示

    这篇文章主要介绍了html中table表格的内容水平和垂直居中显示的相关资料,需要的朋友可以参考下  在CSS样式文件中指定 #class td /*设置表格文字左右和上下居中对齐*/ { vertical-align: middle; text-align: center; }/*class 是所…

    2025年12月21日
    000
  • 关于HTML表格边框的设置的技巧

    下面为大家带来一篇有关html表格边框的设置小技巧。内容挺不错的,现在分享给大家,也给大家做个参考 对于很多初学HTML的人来说,表格 是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解。 一般我们用表格的时候总会给它个border属性,比如: ,其效果如下: 立即学习“前端免费学习笔记(…

    2025年12月21日 好文分享
    000
  • html禁止清除input文本输入缓存的两种方法

    有时候浏览器有很多缓存,我们就执行不了某种操作,必须要清除缓存才可以运行,其实多数浏览器默认会缓存input的值,只有使用ctl+f5强制刷新的才可以清除缓存记录。如果不想让浏览器缓存input的值,有两种方法,请如下文   多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清…

    好文分享 2025年12月21日
    000
  • 多种实例解析HTML表单form的使用方法

    这篇文章主要以多种实例的方式帮助大家了解分析html表单form的使用方法,讲解了form表单如何与用户进行交互,感兴趣的小伙伴们可以参考一下 九个简单实例为大家分析了HTML表单form的使用方法,供大家参考,具体内容如下 1 form表单标签 网站怎样与用户进行交互?答案是使用HTML表单(fo…

    2025年12月21日 好文分享
    000
  • html 网页中的锚点(命名锚记)的使用介绍

    html中的锚点想必大家并不陌生吧,锚点是网页制作中超级链接的一种,又叫命名锚记,下面以实例的方式为大家介绍下锚点的使用,不了解的朋友可不要错过哦 以下资料整理自网路 1.锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。 英文名:anc…

    好文分享 2025年12月21日
    000
  • HTML页面点击下载文件的两种实现方法

    这篇文章主要介绍了html页面点击下载文件的两种实现方法,需要的朋友可以参考下 1.使用标签来完成 点击下载这样当用户打开浏览器点击链接的时候就会直接下载文件。 但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添加…

    好文分享 2025年12月21日
    000
  • 在html中显示JSON数据的方法

    在项目中我们需要将json数据直接显示在页面上,但是如果直接显示字符串很不方便查看,下面给大家带来了html中显示json数据的方法,需要的的朋友参考下吧 背景: 有时候我们需要将json数据直接显示在页面上(比如在做一个接口测试的项目,需要将接口返回的结果直接展示),但是如果直接显示字符串,不方便…

    2025年12月21日
    000
  • HTML制作个人简历的简单实现

    下面为大家带来一篇html制作个人简历的简单实现。挺不错的,现在就分享给大家,也给大家做个参考。一起过来看看吧 简历代码: XML/HTML Code复制内容到剪贴板 简历个人简历【现单位】淄博兜兜【教育/培训经历】⊙2011.9-2015.6 坡来干学校 本科⊙2012.10-2012.11 创业…

    2025年12月21日
    000
  • 浅谈html标题,段落,换行,水平线,特殊字符

    下面小编就为大家带来一篇浅谈html标题,段落,换行,水平线,特殊字符。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦 标题 XML/HTML Code复制内容到剪贴板 一级标题二级标题 对齐方式有left,center,right三种,缺省表示lef…

    2025年12月21日
    000
  • HTML中的5种空格

    html提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。下面通过本文分别给大家介绍html中的5种空格各表示的意义,感兴趣的的朋友参考下吧 HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行…

    好文分享 2025年12月21日
    000
  • HTML如何利用canvas实现弹幕功能

    本篇文章主要介绍html如何利用canvas实现弹幕功能,感兴趣的朋友参考下,希望对大家有所帮助。 简介  最近在做大作业的时候需要做一个弹幕播放器。借鉴了一下别人的源码自己重新实现了一个,演示如下 主要的功能有 发送弹幕设置弹幕的颜色,速度和类型显示弹幕  立即学习“前端免费学习笔记(深入)”; …

    2025年12月21日
    000
  • HTML中图片标签

    这篇文章主要介绍了html图片img标签的相关资料,需要的朋友可以参考下 摘要 项目 说明 形式 @@##@@ 支持 H2+ / e2+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+ 标签省略 开始标签:必须,结束标签:无 说明 img 是 Image(图像)的缩写。src 属…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信