iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >html5如何实现自动播放mov格式视频功能
  • 499
分享到

html5如何实现自动播放mov格式视频功能

2023-06-09 11:06:16 499人浏览 八月长安
摘要

这篇文章给大家分享的是有关HTML5如何实现自动播放mov格式视频功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1、首先网站要支持.MOV格式文件就是说,网站要能识别.MOV格式文件。<mimeMap&

这篇文章给大家分享的是有关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>

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格式视频功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: html5如何实现自动播放mov格式视频功能

本文链接: https://www.lsjlt.com/news/255826.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • html5如何实现自动播放mov格式视频功能
    这篇文章给大家分享的是有关html5如何实现自动播放mov格式视频功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1、首先网站要支持.MOV格式文件就是说,网站要能识别.MOV格式文件。<mimeMap&...
    99+
    2023-06-09
  • HTML5如何实现视频播放功能
    这篇文章将为大家详细讲解有关HTML5如何实现视频播放功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。hivideo是一款基于html5的视频播放器,摒弃video原有...
    99+
    2024-04-02
  • html5中如何实现嵌入视频自动播放
    这篇文章主要介绍了html5中如何实现嵌入视频自动播放,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。各种查资料,找到一个方法,记录一下。核心是监听了canplaythroug...
    99+
    2023-06-09
  • html5如何实现视频播放
    这篇文章主要为大家展示了“html5如何实现视频播放”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5如何实现视频播放”这篇文章吧。一、html5技术优势...
    99+
    2024-04-02
  • html5如何实现视频自动横过来自适应页面且点击播放功能
    这篇文章将为大家详细讲解有关html5如何实现视频自动横过来自适应页面且点击播放功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言在长屏手机里,横过来的视频高度充满,宽度自适应后居中;在短屏手机里,横...
    99+
    2023-06-09
  • html5如何实现播放视频且动态截图
    小编给大家分享一下html5如何实现播放视频且动态截图,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 暂不支持chrom 。支持safari .其他未测试 先...
    99+
    2024-04-02
  • HTML5如何实现视频直播功能思路
    这篇文章给大家分享的是有关HTML5如何实现视频直播功能思路的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、视频流协议HLS与RTMP1. HTTP Live StreamingHTTP Live Stream...
    99+
    2023-06-09
  • C++ Qt如何实现音视频播放功能
    这篇文章将为大家详细讲解有关C++ Qt如何实现音视频播放功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。由于最近着手的Qt项目需要视频播放 自己做的时候踩了很多坑&n...
    99+
    2023-06-21
  • React+TS+IntersectionObserver实现视频懒加载和自动播放功能
    目录IntersectionObserver视频播放控制组件结语为了提高用户体验,网站通常会使用视频来呈现内容。然而,在网站中使用自动播放的视频通常会导致页面加载时间变长,因为用户需...
    99+
    2023-05-18
    React懒加载 React视频自动播放
  • C++ Qt实现音视频播放功能
    由于最近着手的Qt项目需要视频播放 自己做的时候踩了很多坑 避免以后踩坑 故在此记录实现过程  Qt版本 5.9 基于C++11 Qt核心组件与附加组件安装时请打钩 否则可能出现项目...
    99+
    2024-04-02
  • HTML5中如何实现背景音乐自动播放功能
    小编给大家分享一下HTML5中如何实现背景音乐自动播放功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!音乐的自动播放属性,这里...
    99+
    2024-04-02
  • android怎么实现视频播放功能
    Android可以使用MediaPlayer或ExoPlayer等库来实现视频播放功能。以下是一种常见的实现方法:1. 添加权限和依...
    99+
    2023-08-23
    android
  • 如何使用HTML5实现在线视频播放
    这篇文章主要为大家展示了“如何使用HTML5实现在线视频播放”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用HTML5实现在线视频播放”这篇文章吧。编码与...
    99+
    2024-04-02
  • 如何实现HTML5页面音视频在微信和app下自动播放
    这篇文章将为大家详细讲解有关如何实现HTML5页面音视频在微信和app下自动播放,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。纯H5页面在手机端中是无法实现自动播放,移动...
    99+
    2024-04-02
  • Android GSYVideoPlayer视频播放器功能的实现
    GSYVideoPlayer GSYVideoPlayer官方地址 GSYVideoPlayer 一个基于IJkPlayer的播放器 支持调节声音亮度 边播边缓存 使用了Andro...
    99+
    2024-04-02
  • 基于Qt实现视频播放器功能
    目录一、功能介绍二、代码三、运行一、功能介绍 能实现视频播放 二、代码 mainwindow.h #ifndef MAINWINDOW_H #define MAINWIND...
    99+
    2024-04-02
  • html5中如何实现video全屏播放/自动播放
    这篇文章主要介绍了html5中如何实现video全屏播放/自动播放,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。近期开始开发公司新版官网, 首页顶部(header)是一个全屏...
    99+
    2023-06-09
  • Android如何实现播放视频
    这篇文章将为大家详细讲解有关Android如何实现播放视频,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、通过intent的方式,调用系统自带的播放器  Uri uri&n...
    99+
    2023-05-31
    android
  • Django如何实现视频播放
    这篇文章主要讲解了“Django如何实现视频播放”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Django如何实现视频播放”吧!view视图import reimport ...
    99+
    2023-06-30
  • 在Bootstrap模式中怎么实现自动播放YouTube视频
    本篇内容介绍了“在Bootstrap模式中怎么实现自动播放YouTube视频”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作