html5自动播放mov格式视频的实例代码


Posted in HTML / CSS onJanuary 14, 2020

这个不算啥新奇吧?但还是记录一下。

这个问题应该这么看。

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格式视频的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 #HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 #HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 #HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 #HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 #HTML / CSS
HTML5自定义视频播放器源码
Jan 06 #HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 #HTML / CSS
You might like
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
python运行时间的几种方法
2016/06/17 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
python字典排序的方法
2019/10/12 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
详解python程序中的多任务
2020/09/16 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
员工试用期转正自我评价
2015/03/10 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
python代码实现备忘录案例讲解
2021/07/26 Python