html5⾃动播放mov格式视频的实例代码
这个不算啥新奇吧?但还是记录⼀下。
这个问题应该这么看。
1、⾸先⽹站要⽀持.MOV格式⽂件
就是说,⽹站要能识别.MOV格式⽂件。
<mimeMap fileExtension=".mov" mimeType="video/quicktime" />
如何识别?设置MIME类型。以IIS为例。除了可以在IIS界⾯上直接设置,还可以在项⽬的fig⾥设置。给个完整的例⼦<?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" />
html5开发示例<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格式视频的实例代码,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持!
如果你觉得本⽂对你有帮助,欢迎转载,烦请注明出处,谢谢!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论