html5的video标签自动播放

时间：2023-01-03 22:21:46

概念澄清

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

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

配置属性

发现有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&sol;Video 标签&comma;属性&comma;方法&comma;事件汇总

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

  6. HTML5 Audio&sol;Video 标签&comma;属性&comma;方法&comma;事件汇总 （转）

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

  7. &lbrack;转帖&rsqb;HTML5 Audio&sol;Video 标签&comma;属性&comma;方法&comma;事件汇总

    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. vs2013在使用ReportView11时遇到的问题

    最近在做项目中用到2013中的ReportView11  在本机IIS中使用完全没问题  但是放到服务器上总是出问题 解决办法:(1)首先在自己机器上开发的时候  是不用引用  Microsoft.R ...

  2. c&num;部分---输入班级人数，输入语文数学英语成绩，打印语文前两名，数学后两名，英语平均分

    1.开始收集输入项 2.用冒泡排序,统计语文成绩,并附带把语数英三门课全排列 3.数学成绩排序,附带把三门课全排序‘ 4.最后算英语的平均分:

  3. iOS 网络编程：socket

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  4. 分布式发布订阅消息系统 Kafka 架构设计&lbrack;转&rsqb;

    分布式发布订阅消息系统 Kafka 架构设计 转自:http://www.oschina.net/translate/kafka-design 我们为什么要搭建该系统 Kafka是一个消息系统,原本开 ...

  5. 如何在Eclipse中查看Android API源码以及support包源码

    http://my.eoe.cn/futurexiong/archive/181.html 开发第三方Android应用的,大多数人应该还是Eclipse结合ADT来开发.那么大多数时候我们可能希望点 ...

  6. Java&lowbar;图片切片

    package com.creditease.fetch.credit.util.similarity; import java.awt.image.BufferedImage; import jav ...

  7. TFS2015安装、配置

    一.安装,参考:http://www.cnblogs.com/WilsonWu/archive/2011/11/24/2261674.html 二.配置,参考:http://www.cnblogs.c ...

  8. JS&lowbar;左边栏菜单

    需求: 要求实现左边栏菜单点击一下就弹开,其他的隐藏.再点击一下就隐藏. 最多只能有一个菜单的详细内容会显示出来. 三个菜单实现联动效果. 代码如下: 1 <!DOCTYPE html> ...

  9. 关于DNS 和根证书你了解多少？

    由于最近发生的一些事件,我们(Privacy Today 组织)感到有必要写一篇关于此事的短文.它适用于所有读者,因此它将保持简单 —— 技术细节可能会在稍后的文章发布. 什么是 DNS,为什么它与你 ...

  10. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

相关文章