概念澄清

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

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

配置属性

发现有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. JavaScript拆分字符串并将分割的数据放到数组中

    1 2 3 4 5 6 7 var splitArray = new Array(); var string="太平洋.大西洋.印度洋.北冰洋"; var regex = /./; ...

  2. Java中import及package的用法

    有些人写了一阵子 Java,可是对於 Java 的 package 跟 import 还是不 太了解很多人以為原始码 .java 档案中的 import 会让编译器把所 import 的程式通通写到编 ...

  3. bzoj:2595: [Wc2008]游览计划

    Description Input 第一行有两个整数,N和 M,描述方块的数目. 接下来 N行, 每行有 M 个非负整数, 如果该整数为 0, 则该方块为一个景点:否则表示控制该方块至少需要的志愿者数 ...

  4. hihoCoder #1094 : Lost in the City(枚举,微软苏州校招笔试 12月27日 )

    #1094 : Lost in the City 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Little Hi gets lost in the city. He ...

  5. HDU 5752 Sqrt Bo【枚举，大水题】

    Sqrt Bo Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total S ...

  6. 关于WPF添加右击ContextMeun,以及获取所绑定控件的源

    今天在公司给公司做一个门禁软件,其中有一个添加员工的功能,功能已经做好,但是页面的右边是一个treeView控件,于是我想到再添加员工后,可以在treeview上的部门的TreeViewWithIco ...

  7. HTML5 Canvas 数据持久化存储之属性列表

    属性列表想必大家都不会陌生,正常用 HTML5 来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用 HT for Web 来实现属性栏点击按钮弹出多功能选框, ...

  8. VIM 文件搜索与替换

    文件内搜索与替换 :[range]s/pattern/string/[c,e,g,i] 例如: :%s/oldword/newword/cg //对文本中全部匹配进行替换 :m,ns/oldword/ ...

  9. java如何获取一个对象的大小

    When---什么时候需要知道对象的内存大小 在内存足够用的情况下我们是不需要考虑java中一个对象所占内存大小的.但当一个系统的内存有限,或者某块程序代码允许使用的内存大小有限制,又或者设计一个缓存 ...

  10. javascript中window.location.search的用法和作用。

    用该属性获取页面 URL 地址: window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostnam ...