用于播放视频文件的html5元素(html5自动播放mov格式视频的实例代码)
类别:Web前端 浏览量:1096
时间:2021-10-11 00:52:07 用于播放视频文件的html5元素
html5自动播放mov格式视频的实例代码这个不算啥新奇吧?但还是记录一下。
这个问题应该这么看。
1、首先网站要支持.MOV格式文件
就是说,网站要能识别.MOV格式文件。
<mimeMap fileExtension=".mov" mimeType="video/quicktime" />
如何识别?设置MIME类型。以IIS为例。除了可以在IIS界面上直接设置,还可以在项目的web.config里设置。给个完整的例子
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <directoryBrowse enabled="true" /> <defaultDocument> <files> <remove value="default.aspx" /> <remove value="iisstart.htm" /> <remove value="index.html" /> <remove value="index.htm" /> <remove value="Default.asp" /> <remove value="Default.htm" /> </files> </defaultDocument> <staticContent> <remove fileExtension=".mp4" /> <remove fileExtension=".wasm" /> <remove fileExtension=".woff" /> <remove fileExtension=".woff2" /> <remove fileExtension=".mov" /> <mimeMap fileExtension=".mp4" mimeType="video/mpeg" /> <mimeMap fileExtension=".wasm" mimeType="application/wasm" /> <mimeMap fileExtension=".woff" mimeType="application/font-woff" /> <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" /> <mimeMap fileExtension=".mov" mimeType="video/quicktime" /> </staticContent> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> <caching> <profiles> <add extension=".png" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" /> <add extension=".jpg" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" /> <add extension=".css" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" /> <add extension=".js" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange" /> </profiles> </caching> </system.webServer> </configuration>
2、HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> body,center{ padding:0; margin:0; } </style> </head> <body> <center> <video id="video" width="640" height="480" muted controls autoplay="autoplay" preload="auto" > <source src="月半湾.mov" /> 您的浏览器不支持 HTML5 video 标签。 </video> </center> </body> </html>
本例会自动播放。自动播放的关键是“muted”属性(静音),否则无论是声明autoplay=“autoplay”,还是用脚本video.play()都不起作用。这个应该是故意设计成这样的。否则,打开就自动播放,万一是爱情动作片怎么办?如果静音就少了许多顾虑。
总结
以上所述是小编给大家介绍的html5自动播放mov格式视频的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- 用python做一个表白视频(python仿抖音表白神器)
- php上传图片视频代码(详解PHP素材图片上传、下载功能)
- python抖音视频收集(python制作抖音代码舞)
- html5支持video的视频格式(解决html5中的video标签ios系统中无法播放使用的问题)
- python scrapy爬虫教程视频(详解python3 + Scrapy爬虫学习之创建项目)
- html5video怎么优化(html5 移动端视频video的android兼容去除播放控件、全屏)
- python监控系统界面(Python远程视频监控程序的实例代码)
- netcoredocker视频教程(Docker安装部署Net Core实现过程解析)
- 互联网云服务器需要配置(视频云服务器的配置一般怎么选?)
- webview上传功能教程(关于webview适配H5上传照片或者视频文件的方法)
- thinkphp6.0安装(使用composer安装使用thinkphp6.0框架问题视频教程)
- html5视频播放代码详解(HTML5基于flash实现播放RTMP协议视频的示例代码)
- html5 webrtc技术详解(Html5 webRTC简单实现视频调用的示例代码)
- phpstudy8.0使用教程视频(phpstudy v8.1 Apache伪静态配置图文教程)
- 如何替换html5视频播放器(HTML5自定义视频播放器源码)
- html为什么视频不能自动播放(html5中嵌入视频自动播放的问题解决)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)
- 汉族(汉族的祖先是谁)
- 中国有几个名族(中国有几个民族没列入56个民族)
- 数学语文题目(语文的数学题)
- 香蕉(香蕉三种人不宜吃)
- 没钱可以快乐吗(没钱也能快乐吗)
热门推荐
- 如何让yii2高级模板运行起来(Yii框架数据库查询、增加、删除操作示例)
- python怎么输出一个矩阵(python实现转圈打印矩阵)
- 怎么新建数据库登录名用sql语句(T-sql语句修改SQL Server数据库逻辑名、数据库名、物理名的方法)
- mysql冷热数据分离方案(MySQL中使用流式查询避免数据OOM)
- dockergitlab服务器搭建(基于Docker部署GitLab环境搭建的方法步骤)
- html+css网页布局实例(网页布局入门教程 如何用CSS进行网页布局)
- 电脑硬盘读写速度慢怎么办
- C#中static静态变量的用法
- 延迟加载js文件
- nodejs部署上传文件(node.js使用express-fileupload中间件实现文件上传)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9