热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

网页播放视频的三种实现方式

本文介绍了网页播放视频的三种实现方式,分别是使用html5的video标签、使用flash来播放以及使用object标签。其中,推荐使用html5的video标签来简单播放视频,但有些老的浏览器不支持html5。另外,还可以使用flash来播放视频,需要使用object标签。


网页当中播放视频有3种实现方式:


1.使用html5的标签,就像标签那么用。如果只是简单的播放,这是推荐的方式。



<video id&#61;"video" src&#61;"video/ABP-483.avi" width&#61;"480" height&#61;"320" controls loop>
don&#39;t support html5
video>


在src属性指定视频文件的本地路径或网络路径&#xff0c;例如http://2449.vod.myqcloud.com/2449_43b6f696980311e59ed467f22794e792.f20.mp4&#xff0c;即可&#xff0c;经测试&#xff0c;chrome,firefox,ie10都能正常播放


优点是简单&#xff0c;缺点是有些老的浏览器不支持html5


2.使用flash来播放&#xff0c;是指使用标签



<object id&#61;"flowplayer" width&#61;"704" height&#61;"400" data&#61;"media/flowplayer-3.2.16.swf" type&#61;"application/x-shockwave-flash">
<param name&#61;"movie" value&#61;"media/flowplayer-3.2.16.swf" />
<param name&#61;"flashvars" value&#61;&#39;config&#61;{"clip":"media/beach.mp4"}&#39; />
object>


标签中的属性data&#61;"media/flowplayer-3.2.16.swf"&#xff0c;和这里都使用了一个.swf的文件&#xff0c;该文件是自己定义的播放器插件&#xff0c;需要第三方如flowplayer的插件&#xff08;如何安装使用flowplayer&#xff0c;可参考http://flash.flowplayer.org/documentation/installation/&#xff09;&#xff0c;或者自己写代码做一个播放器。还需要一个名为flashvar的param标签&#xff0c;来指定视频文件的url。


优点是&#xff0c;几乎所有浏览器都能播放&#xff0c;只要安装了flash插件&#xff0c;缺点是&#xff0c;需要自主开发或者使用播放器插件&#xff0c;配置相对复杂


3.使用客户端的自带视频播放器&#xff0c;是指使用&#xff0c;这种是把视频完整地下载到客户端本地再调用自身的播放器播放。缺点很明显&#xff1a;网站不能与客户端通信&#xff0c;不能与之交互。


参考&#xff1a;


1、HTML5视频的那些事儿


2、html5网页中用video标签


 


转载于:https://www.cnblogs.com/aaronhoo/p/7049214.html



推荐阅读
  • 原文网址:https:www.cnblogs.comysoceanp7476379.html目录1、AOP什么?2、需求3、解决办法1:使用静态代理4 ... [详细]
  • 在 CentOS 6.4 上安装 QT5 并启动 Qt Creator 时,可能会遇到缺少 GLIBCXX_3.4.15 的问题。这是由于系统中的 libstdc++.so.6 版本过低。本文将详细介绍如何通过更新 GCC 版本来解决这一问题。 ... [详细]
  • 本文介绍了如何在 macOS 上安装 HL-340 USB 转串口驱动,并提供了详细的步骤和注意事项。包括下载驱动、关闭系统完整性保护、安装驱动以及验证安装的方法。 ... [详细]
  • 本文详细介绍了 InfluxDB、collectd 和 Grafana 的安装与配置流程。首先,按照启动顺序依次安装并配置 InfluxDB、collectd 和 Grafana。InfluxDB 作为时序数据库,用于存储时间序列数据;collectd 负责数据的采集与传输;Grafana 则用于数据的可视化展示。文中提供了 collectd 的官方文档链接,便于用户参考和进一步了解其配置选项。通过本指南,读者可以轻松搭建一个高效的数据监控系统。 ... [详细]
  • 三角测量计算三维坐标的代码_双目三维重建——层次化重建思考
    双目三维重建——层次化重建思考FesianXu2020.7.22atANTFINANCIALintern前言本文是笔者阅读[1]第10章内容的笔记,本文从宏观的角度阐 ... [详细]
  • 本文详细介绍了如何在 Linux 系统上安装 JDK 1.8、MySQL 和 Redis,并提供了相应的环境配置和验证步骤。 ... [详细]
  • 本文详细介绍了 Charles 工具的下载、安装、配置及使用方法,特别针对 HTTP 和 HTTPS 协议的数据抓取进行了说明。 ... [详细]
  • 网络爬虫的规范与限制
    本文探讨了网络爬虫引发的问题及其解决方案,重点介绍了Robots协议的作用和使用方法,旨在为网络爬虫的合理使用提供指导。 ... [详细]
  • IOS Run loop详解
    为什么80%的码农都做不了架构师?转自http:blog.csdn.netztp800201articledetails9240913感谢作者分享Objecti ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 大家好,我是李白。本文将分享一个从零开始的全栈项目,涵盖了设计、前端、后端和服务端的全面学习过程。通过这个项目,我希望能够帮助初学者更好地理解和掌握全栈开发的技术栈。 ... [详细]
  • 在CentOS 7环境中安装配置Redis及使用Redis Desktop Manager连接时的注意事项与技巧
    在 CentOS 7 环境中安装和配置 Redis 时,需要注意一些关键步骤和最佳实践。本文详细介绍了从安装 Redis 到配置其基本参数的全过程,并提供了使用 Redis Desktop Manager 连接 Redis 服务器的技巧和注意事项。此外,还探讨了如何优化性能和确保数据安全,帮助用户在生产环境中高效地管理和使用 Redis。 ... [详细]
  • DVWA学习笔记系列:深入理解CSRF攻击机制
    DVWA学习笔记系列:深入理解CSRF攻击机制 ... [详细]
  • 在Eclipse中提升开发效率,推荐使用Google V8插件以增强Node.js的调试体验。安装方法有两种:一是通过Eclipse Marketplace搜索并安装;二是通过“Help”菜单中的“Install New Software”,在名称栏输入“googleV8”。此插件能够显著改善调试过程中的性能和响应速度,提高开发者的生产力。 ... [详细]
  • V8不仅是一款著名的八缸发动机,广泛应用于道奇Charger、宾利Continental GT和BossHoss摩托车中。自2008年以来,作为Chromium项目的一部分,V8 JavaScript引擎在性能优化和技术创新方面取得了显著进展。该引擎通过先进的编译技术和高效的垃圾回收机制,显著提升了JavaScript的执行效率,为现代Web应用提供了强大的支持。持续的优化和创新使得V8在处理复杂计算和大规模数据时表现更加出色,成为众多开发者和企业的首选。 ... [详细]
author-avatar
个信2502857367
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有