返回顶部
首页 > 资讯 > 前端开发 > node.js >HTML5如何实现根据不同浏览器播放不同格式
  • 511
分享到

HTML5如何实现根据不同浏览器播放不同格式

2024-04-02 19:04:59 511人浏览 安东尼
摘要

HTML5如何实现根据不同浏览器播放不同格式,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。通过html5的Video标签语法,我们可以快速的在

HTML5如何实现根据不同浏览器播放不同格式,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

通过html5的Video标签语法,我们可以快速的在网页中嵌入影片。但不同浏览器,所支持的HTML5影片格式(视频解码)皆不同,因此除了要备备相关的影音文件外,再来就是要如何让浏览器能自动判断播放的格式,若我们打开的是IE浏览器或Fireofx,它会自动抓取浏览器所支持的格式文件。

本以为这需要通过js、或者浏览器特有的属性来作判断,其实一点也不用,直接通过Html5的开放式标签,就会自动依照不同浏览器播放不同的影音格式,超方便完全不用再写任何的判断式,只要把不同格式的文件准备就好了!

<video id="Html5Video" width="640" height="360" preload controls>   <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' /> <source src="video.WEBm" type='video/webm; codecs="vp8, vorbis"' /> <!--  //旧的嵌入语法放这  <object>...</object> --> </video>
浏览器 | 影音格式Ogg TheoraMP4(H.264)WebM
Microsoft Internet Explorer9
Mozilla Firefox5+
Google Chrome13+
Apple Safari5+
Opera11+

最简单的方法,就只要备备好Mp4与Ogv二种影音格式就可以了,接著来看在各浏览器下的呈现结果。

IE9.0:

HTML5如何实现根据不同浏览器播放不同格式

Chrome 13.0:

HTML5如何实现根据不同浏览器播放不同格式

Firefox5.0:

HTML5如何实现根据不同浏览器播放不同格式

Safari 5.05:

HTML5如何实现根据不同浏览器播放不同格式

Opera 11.0:

HTML5如何实现根据不同浏览器播放不同格式

直接通过开放式的标签写法后,就会自动依照不同的浏览器,自动抓取自已支持的影音格式,并将正确的将影音档给播放出来,且完全不用写何的判断式,只要把相关的影音文件,完整无误的标示出来,就可正常在各大浏览器中运作了!

看完上述内容,你们掌握HTML5如何实现根据不同浏览器播放不同格式的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网node.js频道,感谢各位的阅读!

--结束END--

本文标题: HTML5如何实现根据不同浏览器播放不同格式

本文链接: https://lsjlt.com/news/86366.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • HTML5如何实现根据不同浏览器播放不同格式
    HTML5如何实现根据不同浏览器播放不同格式,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。通过Html5的Video标签语法,我们可以快速的在...
    99+
    2024-04-02
  • jQuery如何根据浏览器大小添加不同的样式
    小编给大家分享一下jQuery如何根据浏览器大小添加不同的样式,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!根据浏览器大小添加不同的样式<script type="...
    99+
    2024-04-02
  • AngularJS如何实现根据不同条件显示不同控件
    这篇文章将为大家详细讲解有关AngularJS如何实现根据不同条件显示不同控件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。由于项目需求,需要实现根据不同条件显示不同控件...
    99+
    2024-04-02
  • css如何实现不同浏览器下兼容文本两端对齐
    小编给大家分享一下css如何实现不同浏览器下兼容文本两端对齐,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在 form 表单的前端布局中,我们经常需要将文本框的提...
    99+
    2023-06-08
  • 如何理解浏览器对于CSS不同类中的同属性不同值优先级问题
    这篇文章主要介绍“如何理解浏览器对于CSS不同类中的同属性不同值优先级问题”,在日常操作中,相信很多人在如何理解浏览器对于CSS不同类中的同属性不同值优先级问题问题上存在疑惑,小编查阅了各式资料,整理出简单...
    99+
    2024-04-02
  • html5如何实现自动播放mov格式视频功能
    这篇文章给大家分享的是有关html5如何实现自动播放mov格式视频功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1、首先网站要支持.MOV格式文件就是说,网站要能识别.MOV格式文件。<mimeMap&...
    99+
    2023-06-09
  • 不同云服务器如何实现mysql数据库同步
    下文给大家带来关于不同云服务器如何实现mysql数据库同步,感兴趣的话就一起来看看这篇文章吧,相信看完不同云服务器如何实现mysql数据库同步对大家多少有点帮助吧。目标:A云服务器上自建的数据库同步到B云服...
    99+
    2024-04-02
  • windows edge浏览器flash插件不能自动播放如何解决
    本篇内容介绍了“windows edge浏览器flash插件不能自动播放如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!解决方法:方法...
    99+
    2023-07-01
  • dreamweaver如何实现鼠标放在不同的位置显示不同的图片
    这篇文章将为大家详细讲解有关dreamweaver如何实现鼠标放在不同的位置显示不同的图片,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先用ps或者其他软件将几张图片的大小p成一样的。比如笔者把三张图片...
    99+
    2023-06-08
  • win8系统如何实现IE10浏览器收藏夹的同步 win8实现IE10浏览器收藏夹同步方法
    云时代给我们的生活带来了很大的便利,对于浏览器来说更是如此。自从有了云同步,我们就可以在不同的设备之间分享自己设置的信息了,确实是很方便的。这对于微软的浏览器IE10来说也是如此的,不过有的用户反应说自己在...
    99+
    2022-06-04
    收藏夹 浏览器 如何实现
  • python如何实现不同数据库间数据同步功能
    这篇文章主要为大家展示了python如何实现不同数据库间数据同步功能,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“python如何实现不同数据库间数据同步功能”这篇文章吧。python是什么意思P...
    99+
    2023-06-06
  • css中如何实现不同的button样式
    这篇文章将为大家详细讲解有关css中如何实现不同的button样式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。   在网页设计过程中,程序员们常常需要配合美工来设计页...
    99+
    2024-04-02
  • 如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同
    这篇文章主要介绍“如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同”,在日常操作中,相信很多人在如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同问题上存在疑惑,小编查阅了各式资料,整理出简单...
    99+
    2024-04-02
  • Python 容器日志同步,如何实现数据不丢失、不重复?
    容器化应用的快速发展,使得容器日志的管理变得越来越重要。在容器日志管理的过程中,同步容器日志是一个常见的需求。容器日志同步需要满足不丢失、不重复等要求,因此,如何实现 Python 容器日志同步是一个值得探讨的话题。 一、容器日志同步的需...
    99+
    2023-11-02
    容器 日志 同步
  • 如何使用Python实时读取不同格式的数组文件?
    随着数据分析和机器学习的发展,对于不同格式的数组文件的读取需求变得越来越重要。Python作为一种高效且易于使用的编程语言,拥有丰富的数据读取库,使得读取不同格式的数组文件变得更加容易。本文将介绍如何使用Python实时读取不同格式的数组文...
    99+
    2023-07-05
    实时 数组 文件
  • Golang文件读取实战:如何应对不同格式的文件
    Golang是一种高效的编程语言,它可以处理各种数据类型和文件格式。在文件读取方面,Golang提供了多种方法,使我们能够应对各种文件格式的读取需求。本文将介绍如何在Golang中读取常见的几种文件格式,包括...
    99+
    2024-01-19
    Golang 文件读取 文件格式
  • Python发送Post请求之如何实现根据参数位置传参、数据类型、不同方式传参
    本篇内容介绍了“Python发送Post请求之如何实现根据参数位置传参、数据类型、不同方式传参”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2023-06-15
  • 如何在Storm中处理不同数据源格式之间的转换
    在Storm中处理不同数据源格式之间的转换通常通过自定义的bolt来实现。以下是一种可能的方法: 创建一个自定义的bolt,该bo...
    99+
    2024-03-13
    Storm
  • 如何使用 PHP 内置函数将数据转换为不同格式?
    php 内置函数可用于执行以下数据转换:数字格式转换:十进制转换为八进制(decoct())、十进制转换为十六进制(dechex())字符串转换为数组:按分隔符分割字...
    99+
    2024-04-22
    php 数据转换 mysql laravel lsp
  • vue3响应式对象如何实现方法的不同点
    目录vue3响应式对象实现方法的不同点Vue2和Vue3响应式原理对比响应式原理实现逻辑Vue2响应式原理简化Vue2响应式原理弊端Vue3响应式原理简化vue3响应式对象实现方法的...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作