概念澄清

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

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

配置属性

发现有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. Postman基本使用——get、post请求、断言、环境变量

      Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件. 它提供功能强大的 Web API & HTTP 请求调试. 它能够发送任何类型的HTTP 请求 (GET, ...

  2. Error : Invalid Allocation Size ：·····Bytes 以及 abort() has been called

    把这两个Error放在一起,主要是因为在写代码的时候发现,他们有公共的错误. (一)Invalid Allocation Size 主要是因为new分配内存出了问题,从直观翻译来看,应该是内存分配长度 ...

  3. CTF---密码学入门第五题 传统知识+古典密码

    传统知识+古典密码分值:10 来源: 霜羽 难度:易 参与人数:2297人 Get Flag:735人 答题人数:938人 解题通过率:78% 小明某一天收到一封密信,信中写了几个不同的年份     ...

  4. Vijos P1103 校门外的树【线段树，模拟】

    校门外的树 描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,……, ...

  5. [国嵌笔记][021-022][ARM处理器工作模式]

    [ARM处理器工作模式] 处理器工作模式 1.User(urs):用户模式,linux应用程序运行在用户模式 2.FIQ(fiq):快速中断模式 3.IRQ(irq):中断模式 4.Superviso ...

  6. 如何使用cmd打开磁盘目录和文件

    在windows操作系统中拥有命令行工具(cmd).cmd具有强大的功能,这里我就和大家介绍一下怎么使用cmd命令打开文件. 工具/原料 cmd命令行 打开cmd 1 在windows操作系统中按住w ...

  7. :nth-child(n)

    规定属于其父元素的第二个子元素的每个 p 的背景色: p:nth-child(2) { background:#ff0000; } 1定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 ...

  8. Shell常用命令整理

    http://blog.csdn.net/junmail/article/details/4602745 1.   ls: 类似于dos下的dir命令 ls最常用的参数有三个: -a -l -F. l ...

  9. libz.dylib

    1. .dylib意味着这是一个动态链接库. 2. libz.dylib是提供zip压缩解压缩的库

  10. label+input实现开关切换效果

    Document 主要使用label+input来实现改变left的值,下面是核心代码,意思就是选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px ...