热门标签 | 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压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • 本文介绍了计算机网络的定义和通信流程,包括客户端编译文件、二进制转换、三层路由设备等。同时,还介绍了计算机网络中常用的关键词,如MAC地址和IP地址。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • 原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中,有两种配置文件,一种 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • Firefox火狐浏览器关闭到http://detectportal.firefox.com的流量问题解决办法
    本文介绍了使用Firefox火狐浏览器时出现关闭到http://detectportal.firefox.com的流量问题,并提供了解决办法。问题的本质是因为火狐默认开启了Captive portal技术,当连接需要认证的WiFi时,火狐会跳出认证界面。通过修改about:config中的network.captive-portal-service.en的值为false,可以解决该问题。 ... [详细]
  • 使用Ubuntu中的Python获取浏览器历史记录原文: ... [详细]
  • HTML学习02 图像标签的使用和属性
    本文介绍了HTML中图像标签的使用和属性,包括定义图像、定义图像地图、使用源属性和替换文本属性。同时提供了相关实例和注意事项,帮助读者更好地理解和应用图像标签。 ... [详细]
  • Linux如何安装Mongodb的详细步骤和注意事项
    本文介绍了Linux如何安装Mongodb的详细步骤和注意事项,同时介绍了Mongodb的特点和优势。Mongodb是一个开源的数据库,适用于各种规模的企业和各类应用程序。它具有灵活的数据模式和高性能的数据读写操作,能够提高企业的敏捷性和可扩展性。文章还提供了Mongodb的下载安装包地址。 ... [详细]
  • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
    本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
  • 本文讨论了在openwrt-17.01版本中,mt7628设备上初始化启动时eth0的mac地址总是随机生成的问题。每次随机生成的eth0的mac地址都会写到/sys/class/net/eth0/address目录下,而openwrt-17.01原版的SDK会根据随机生成的eth0的mac地址再生成eth0.1、eth0.2等,生成后的mac地址会保存在/etc/config/network下。 ... [详细]
  • 本文由编程笔记小编整理,主要介绍了使用Junit和黄瓜进行自动化测试中步骤缺失的问题。文章首先介绍了使用cucumber和Junit创建Runner类的代码,然后详细说明了黄瓜功能中的步骤和Steps类的实现。本文对于需要使用Junit和黄瓜进行自动化测试的开发者具有一定的参考价值。摘要长度:187字。 ... [详细]
  • 如何在HTML中获取鼠标的当前位置
    本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]
  • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
  • Centos7搭建ELK(Elasticsearch、Logstash、Kibana)教程及注意事项
    本文介绍了在Centos7上搭建ELK(Elasticsearch、Logstash、Kibana)的详细步骤,包括下载安装包、安装Elasticsearch、创建用户、修改配置文件等。同时提供了使用华为镜像站下载安装包的方法,并强调了保证版本一致的重要性。 ... [详细]
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社区 版权所有