HTML5 video视频的playsinline和autoplay

最新推荐文章于 2025-05-30 09:09:24 发布

weixin_34248487

最新推荐文章于 2025-05-30 09:09:24 发布

阅读量1.3w

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：https://my.oschina.net/jojo76/blog/826719

本文介绍了一种解决H5页面中video标签在iPhone上无法实现内屏播放及自动播放的方法，通过添加特定属性与使用Obj-C进行配置，使视频能够在iOS10及以上版本的iPhone上正常播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

作者：汪娇娇

时间：2017年1月17日

问题其实很简单，就是h5的video视频如何在iPhone上不全屏显示，并且自动播放。

测过就知道，只要在video上加一个autoplay属性，就可以在iPad或者Browser上自动播放；给video加一个宽高，就可以在iPad或者Browser上不全屏播放。但在iPhone上用这方法简直免谈。

话不多说，直接说方法。

HTML（加webkit-playsinline和autoplay属性）

<video id="player" width="480" height="320" webkit-playsinline autoplay>

Obj-C

webview.allowsInlineMediaPlayback = YES;        //允许内屏播放
webview.mediaPlaybackRequiresUserAction = NO;   //自动播放

这样就OK啦，不过仅支持ios10及以上。

注：video的src最好写绝对路径，不然视频播放不了，大家可以去测测。

转载于:https://my.oschina.net/jojo76/blog/826719

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34248487

关注关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【html5的video标签在移动端的使用】【微信内部浏览器video自动播放】【vue-video-player】

aaa123aaasqw的博客

07-12

1318

在移动端的首页用视频做背景动画，让动画循环，自动播放，静音。

video标签的webkit-playsinline属性有什么作用？

王铁柱666的博客

01-16

547

这个属性主要用于移动网页设计，特别是在 iOS 的 Safari 浏览器中。在默认情况下，当用户点击播放视频时，iOS 会尝试以全屏模式播放视频。然而，在某些情况下，开发者可能希望视频在页面内播放，而不是全屏播放，这时就可以使用。当在 iOS 设备上播放视频时，这个属性可以防止视频在全屏模式下播放。换句话说，它强制视频在页面内联播放，而不是切换到全屏模式。因此，在使用这个属性时，需要考虑到浏览器的兼容性问题。元素中，以确保在各种 iOS 版本和浏览器上都能实现内联播放。属性，这是一个标准化的属性，与。

参与评论您还未登录，请先登录后发表或查看评论

Video标签的playsinline属性

weixin_33906657的博客

04-28

1万+

<video>的基本属性：　　preload: （预加载）iPhone支持，Android不一定支持; 　 poster: （封面图片）iPhone支持，Android不一定支持; 　　autoplay: （自动播放）iPhone中的Safari不支持，webview可能被开启。Android不一定支持；　　loop: （循环播放）iPhone支持，Android不一定...

Video.js 播放器基础配置指南

最新发布

gitblog_00656的博客

05-30

507

Video.js 播放器基础配置指南前言 Video.js 是一个开源的 HTML5 视频播放器框架，它支持在多种浏览器和设备上播放视频内容。本文将详细介绍如何从零开始配置 Video.js 播放器，包括不同环境下的安装方式和初始化方法。环境准备 1. 引入 Video.js 资源 Video.js 需要引入两个核心文件：CSS 样式文件和 JavaScript 文件。你可以选择以下三种方式之...

控制webview使用html5的video播放视频不全屏(inline)的方法

Enn的数据库

06-30

1581

webview中用html5的video方式播放视频时，在ipad上是默认原来大小的，而在iphone上是默认全屏播放的。论坛中搜索，都没给出答案，google－》stackoverflow，找到最终解决方法： HTML里video必须加上webkit-playsinline属性 <video id="player" width="480" height="320" webkit-pl

HTML中display:inline;特性

lanseguhui的博客

05-24

1万+

display属性inline内嵌式布局特点:1.可以支持同行排列2.不支持宽高的设置,不支持上下margin设置,支持左右margin的设置,大小由内部的文字撑开3.内部的标签的只能是文字或者Inline型标签,项目中的inline主要用来套文字4.浏览器会解析文档中两个inline型标签之间的空白符为间隙,该间隙大小不可控,不同浏览器大小不一致消除该间隙的方法1.为其父级设置font-size...

HTML5 video循环播放多个视频的方法步骤

11-20

HTML页面包括`<head>`和`<body>`部分，其中`<style>`标签定义了视频和视频容器的样式，确保视频在整个屏幕中居中并适应不同的设备尺寸。`<script>`标签包含了处理视频播放逻辑的JavaScript代码。 **注意事项与扩展*...

html5视频媒体标签video的使用方法及完整参数说明详解

12-14

video是HTML5的一个视频媒体标签，其作用是在网页中嵌入指定的视频，video标签的代码结构及参数如下。 HTML代码结构： <video controls autoplay loop preload="auto" poster="img/popup-img.png" webkit-...

详解Html5中video标签那些属性和方法

11-21

最近在写一个自定义播放器, 写之前我们肯定要把播放器的属性和方法全部过一遍,知彼知己,方能百战不殆嘛…后面会把自己写的播放器和踩过的一些坑也上传上来 video标签行内属性 src：视频的URL poster：视频封面，...

浅谈html5 video 移动端填坑记

09-27

HTML5 video元素是现代Web开发中常用的一种多媒体内容嵌入方式，它允许开发者在网页中嵌入视频而无需依赖浏览器插件，尤其是在移动设备上的表现和兼容性一直是前端开发者关注的焦点。本文针对移动端HTML5 video的...

H5中video使用

diliedou4174的博客

04-16

209

<div id="video" src="" controls="true" poster="" preload="auto" webkit-playsinline="true"></div>属性介绍： 1）src:视频地址 2）controls:Gecoko会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放； 3）pos...

html span display:inline,display:inline的用法

weixin_35601445的博客

06-18

737

display:inline的用法发布时间：2010-08-10 20:52:35 作者：佚名我要评论和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了 DIV1 DIV2 这里DIV1和DIV2分别占一行，...

H5 视频播放 video使用总结

weixin_34032621的博客

12-14

1602

最近用vue在做一个H5页面，有一个播放视频的功能，做完了总结一下关于video的用法，详细原文，大家可以点这里https://developer.mozilla.org... 1、如果你只是单纯的想在页面播放一个视频，下面的代码已经足够了，还支持ios和Android小窗播放 <video class="video" c...

x5-playsinline， playsInline， webkit-playsinline， x5-video-player

Summer_Qzz的博客

07-09

5471

苹果微信默认视频打开会全屏播放，使用以下属性后可禁止。 x5-playsinline， playsInline， webkit-playsinline， x5-video-player

移动端HTML5<video>视频播放优化实践

热门推荐

一名普通码农的菜地

09-28

3万+

移动端HTML5视频播放优化实践星期三 2015/01/21 23:23 评论：11条分类：Web前端作者：轩枫点击量：1708 遇到的挑战移动端HTML5使用原生标签播放视频，要做到两个基本原则，速度快和体验佳，先来分析一下这两个问题。下载速度以一个8s短视频为例，wifi环境下提供的高清视频达到1000kbps，文件大小大约1MB；非wifi

视频H5 video最佳实践

tongluren381的博客

07-06

1185

视频H5 video最佳实践 video的属性 <video id="video" src="video.mp4" controls = "true" poster="images.jpg" // 视频封面 preload="auto" webkit-playsinline="true" /* 这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/ playsinline="true" // IOS微信浏览器支持小窗内播放 x...

h5 video标签

CamilleZJ的博客

12-03

1972

h5 video标签： Video 对象属性属性描述 audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。 autoplay * 设置或返回是否在就绪（加载完成）后随即播放视频。 buffered 返回表示视频已缓冲部分的 TimeRanges 对象。 controller 返回表示视频当前媒体控制...

h5的video标签

qq_38677540的博客

04-12

305

在vue项目中video动态绑定的实现使用computed <span v-html="videoSource" ></span> computed: { videoSource: function () { return ` <video controls x5-playsinline="true" controlslist="nodownload" playsinline

html添加自动视频播放,html5中嵌入视频自动播放的问题解决

weixin_35301706的博客

05-31

1611

在H5页面中嵌入视频的情况是比较多件的，有时候会碰到需要自动播放的情况，之前根本觉得这不是问题，但是自己的项目中需要视频的时候就有点sb了，达不到老板的要求，那个急呀~~~各种查资料，找到一个方法，记录一下。核心是监听了canplaythrough事件，然后自己去让视频play()。在这个过程中还发现，ios和安卓不一样，安卓上需要设置muted才能自动播放，ios没这个限制，当然，多媒体播放政策...