热门标签 | 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



推荐阅读
  • JavaScript 跨域解决方案详解
    本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术,包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]
  • Asynchronous JavaScript and XML (AJAX) 的流行很大程度上得益于 Google 在其产品如 Google Suggest 和 Google Maps 中的应用。本文将深入探讨 AJAX 在 .NET 环境下的工作原理及其实现方法。 ... [详细]
  • 本文探讨了异步编程的发展历程,从最初的AJAX异步回调到现代的Promise、Generator+Co以及Async/Await等技术。文章详细分析了Promise的工作原理及其源码实现,帮助开发者更好地理解和使用这一重要工具。 ... [详细]
  • 利用Node.js实现PSD文件的高效切图
    本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ... [详细]
  • 本文详细探讨了在Java TCP编程中,如何理解和测量并发连接数、请求数及并发用户数,并提供了实际应用中的测试方法和优化建议。 ... [详细]
  • td{border:1pxsolid#808080;}参考:和FMX相关的类(表)TFmxObjectIFreeNotification ... [详细]
  • Maven + Spring + MyBatis + MySQL 环境搭建与实例解析
    本文详细介绍如何使用MySQL数据库进行环境搭建,包括创建数据库表并插入示例数据。随后,逐步指导如何配置Maven项目,整合Spring框架与MyBatis,实现高效的数据访问。 ... [详细]
  • 本项目基于网络上找到的一个启动动画包,针对Sony手机上的Miku启动动画进行了个性化调整,并重新打包以适应CM(CyanogenMod)系统。此版本旨在为CM用户提供更加个性化的启动体验。 ... [详细]
  • Hibernate全自动全映射ORM框架,旨在消除sql,是一个持久层的ORM框架1)、基础概念DAO(DataAccessorOb ... [详细]
  • 尽管在WPF中工作了一段时间,但在菜单控件的样式设置上遇到了一些基础问题,特别是关于如何正确配置前景色和背景色。 ... [详细]
  • ASP.NET 进度条实现详解
    本文介绍了如何在ASP.NET中使用HTML和JavaScript创建一个动态更新的进度条,并通过Default.aspx页面进行展示。 ... [详细]
  • 本文探讨了如何在 Spring MVC 框架下,通过自定义注解和拦截器机制来实现细粒度的权限管理功能。 ... [详细]
  • 本文详细介绍了如何在最新版本的Xcode中重命名iOS项目,包括项目名称、应用名称及相关的文件夹和配置文件。通过本文,开发者可以轻松完成项目的重命名工作。 ... [详细]
  • MITM(中间人攻击)原理及防范初探(二)
    上一篇文章MITM(中间人攻击)原理及防范初探(一)给大家介绍了利用ettercap进行arp欺骗及劫持明文口令,后来我发现好友rootoorotor的文章介绍比我写的更透彻,所以基础利用大家可以参看 ... [详细]
  • 探讨如何在映射文件中处理重复的属性字段,以避免数据操作时出现错误。 ... [详细]
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社区 版权所有