概念澄清

这里的“自动播放”，是指用户的视觉效果，并不一定是元素自身的自动播放。

查看相关文档后，有以下两种最简方案。

配置属性

发现有video标签有一个自动播放的属性autoplay，指定后会马上播放视频。

文档地址：HTML video 元素

通过API触发

在有些场景下，当前页面中的video元素并不一定在可见区域内。

比如，某些电商的活动页，首屏内容中没有出现视频。但是用户向上滚动页面后，出现在可见区域内的视频就会自动播放。

var video = document.querySelector('video');

video.play();

文档地址：HTMLVideoElement

html5的video标签自动播放的更多相关文章

  1. 解决html5中video标签无法播放mp4问题的办法

    这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...

  2. 关于HTML5中Video标签无法播放mp4的解决办法

    1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...

  3. 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决

    为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...

  4. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

  5. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  6. HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  7. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  8. 防止html5的video标签在iphone中自动全屏

    问题: 当在iphone中打开html5页面中的video视频时,会默认调取系统播放器,全屏播放视频资源. 解决方式: 1. 首先在html5页面的video标签中添加webkit-playsinli ...

  9. mp4 格式无法使用html5的video标签播放

     只有视频编码为h264的视频才能在html5中使用video标签播放 我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px;

随机推荐

  1. UINavigationController 返回手势与 leftBarButtonItem

    UINavigationController 返回手势与 leftBarButtonItem UINavigationController 自带从屏幕左侧边缘向右滑动的返回手势,可以通过这个手势实现 ...

  2. 深度优先搜索(DFS)专题讲座PPT截图【需要原稿的请留言或私信】

    以下是今晚我在bilibili直播讲DFS算法的时候的ppt截图,ppt搞了一下午,水平有限,只能做成这个样子,供大家参考!(如果需要原稿,请在评论区留言或私信告诉我,我会发到你的邮箱里),感谢各位的 ...

  3. [51nod1676]无向图同构

    如果一个无向图重标号后与另一个无向图完全一致(即对于任意两点,他们之间的边在两个图中都存在或都不存在),则称两个无向图同构. 给定两个n个点m条边的无向图,判定两个无向图是否同构.不超过20组数据,n ...

  4. c++(线性堆栈)

    前面我们讲到了队列,今天我们接着讨论另外一种数据结构:堆栈.堆栈几乎是程序设计的命脉,没有堆栈就没有函数调用,当然也就没有软件设计.那么堆栈有什么特殊的属性呢?其实,堆栈的属性主要表现在下面两个方面: ...

  5. [UWP]使用Reveal

    1. 前言 之前在 如何使用Fluent Design System 这篇文章里已经简单介绍过Reveal的用法,这篇再详细介绍其它内容. 2. 自定义RevealButtonStyle 我觉得常用I ...

  6. [国嵌攻略][162][USB协议分析]

    USB设备逻辑结构 在USB设备的逻辑组织中,包含设备.配置.接口和端点4个层次.设备通常有一个或多个配置,配置通常有一个或多个接口,接口通常有零个或多个端点. USB设备描述符 当我们把USB设备( ...

  7. line-height相关总结

    line-height http://cindylu520.iteye.com/blog/670512 四个boxes containing boxes inline boxes 匿名inline b ...

  8. JAVA之JDBC的简单使用(Mysql)

    JDBC增删查改 昨天七七八八的关于Mysql的配置 和 基本使用也算是初步解决了,今天 抽空看了JAVA的JDBC(JAVA DATA BASE CONNECTION)我也不知道我全称拼写对对不对

  9. Linux包管理器

    按Linux系统分类 Redhat系列:Redhat(本身就是Centos).Centos.Fedora等,采用Dpkg包管理器 Debian系列:Debian.Ubuntu等,使用RPM包管理器 R ...

  10. Nginx的启动(start),停止(stop)命令

    http://blog.csdn.net/u010739551/article/details/51654859 查看Nginx的版本号:nginx -V 启动Nginx:start nginx 快速 ...