手机端 h5 video 的全屏事件

已于 2022-03-18 16:44:56 修改
阅读量2.4k 收藏 5
点赞数 2
分类专栏： vue html5 文章标签： css3 前端 css
于 2022-03-18 16:44:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxiao_zheng/article/details/123578842
版权
vue 同时被 2 个专栏收录
24 篇文章 0 订阅
订阅专栏
html5
2 篇文章 0 订阅
订阅专栏

项目需求

1 可横屏全屏播放
2 横屏播放结束需要弹框显示

实现

1 需求一

video 自带全屏功能，但是全屏横屏显示，需要手机开启横屏切换；

2 需求二

需要知道全屏和结束标识，
video文档有这两个事件，想着直接用就行；
在这里插入图片描述
在这里插入图片描述

问题

全屏事件压根不起作用，不知道为啥

在这里插入图片描述

解决

video 的全屏转换 其实也是dom元素的操作，通过监听全屏事件，将状态暴露出去
在这里插入图片描述
在这里插入图片描述

Closure999
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5全屏API与视频全屏
小陈的博客
03-24 1042
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
HTML5视频手机全屏,HTML5在手机端实现视频全屏展示方法
weixin_42297349的博客
06-15 965
这篇文章主要介绍了HTML5在手机端实现视频全屏展示方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧最近做项目，遇到一个问题，在手机上要实现视频的全屏播放功能。测试了很久，终于找到解决办法。第一种：将视频放大来控制。视频在播放的时候，全屏是根据高度来的，如果设置视频 video 标签的宽度是 100% 高度是 110% ，可...
h5 小程序 video全屏
qtfiot的博客
04-07 189
<template> <view> <template v-for="item in list"> <view :key="item.id" class="flex flex-between list-item-box" :class="[{'chapter-video-bg0': item.studyFlag},{'chapter-video-bg1': item.id === relevance.studyInfo
h5使用video标签解决自动全屏问题
qq_24978681的博客
10-19 9374
h5使用video标签解决自动全屏问题
H5手机端图片列表滑动切换代码
07-24
H5手机端图片列表滑动切换代码是一款适用于手机banner大图切换或图文列表滑动切换展示代码。
H5 video标签 全屏播放各属性测试+兼容处理记录
热门推荐
H舞
03-23 1万+
video标签真是个神奇的属性，每次处理兼容都搞得人很头疼，H5移动端视频处理个人理解可以拆分为单独的一块，不同与其他H5功能，好比canvas一样，往小了看是简单的小视频播放（快手、抖音之类）。进一步可以演变为播放器嵌套，比较有名的例如B站开源的flv.js，之前笔记详情使用过，解决了flv格式文件video标签不支持播放问题。再进一步可以演化为视频直播类H5，16年末的时候看过上海一家直播类H...
video的全屏事件
最新发布
m0_69439101的博客
09-15 744
【代码】video的全屏事件。
h5 视频全屏-横屏实现，遇到问题以及解决方案
ringlot的博客
10-14 5692
最近需要实现h5 视频全屏也就是横屏，横屏后需要将相关视频展现在侧边栏。考虑到h5是不能让手机强制横屏的，只能考虑用css 样式上横屏显示video
video标签使用（全屏的进入和监听）
ys_dd的博客
01-06 8308
<video class="my-video1" id="myVideo1" bindfullscreenchange="screenChange" src="{{ossPath+'video/dunhuang-video202201051033.mp4'}}" controls='controls'></video> 点击进入全屏： showVideo1() { let videoContext = wx.createVideoContext('myVideo1').
微信浏览器 H5 IOS/安卓 video 实现全屏视频背景/全屏视频广告自动播放
菜鸟日记
07-13 677
这里想实现的效果严格意义上应该说是视频内容占满一屏，即video的宽高设置占满一屏，去掉video的控制面板（去掉controls属性），再利用z-index或者position:fixed添加文字、button和交互。微信公众号网页开发，用户入口想做个宣传产品的全屏视频广告，倒计时结束跳到首页，或者用户点击【跳过广告】按钮跳到首页，就像APP、小程序刚打开那种。此全屏（占满一屏）非彼全屏（视频控件自带全屏按钮点击后的浮窗全屏效果）6、最后处理的方式，IOS入口播放视频广告，如果是安卓直接跳到首页。
H5app手机端控制台打印vConsole
08-09
H5app手机端控制台打印vConsole H5app手机端控制台打印vConsole 用于开发H5app打印。显示在手机端控制台
HTML5 video播放器全屏(fullScreen)方法实例
09-28
主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下
h5手机端签到demo
08-03
h5手机端签到demo
H5Video移动端播放器jquery插件
12-14
$('div').video({ src:[], // 播放地址，{src:'',pic:''},'****.mp4'形式 fix:true, // 是否禁止最大化 auto:true, // 立即播放 controls:true, // 是否显示按钮 loop:true, // 是否循环，单个视频有效 ...
h5-video标签全屏显示记录
qq_15855289的博客
02-10 219
video { width: 100%; height: 100%; object-fit: fill; }
持续更新-jQuery发微（三）-H5<video>设置高宽
IT_Surfer的专栏
03-24 1159
在HTML5中的标签，本身是带有width和height属性的，在设置这些属性值的时候，如果想要直接设置它得width和height，数字不能加任何单位 类似： video.width=“XXXpx”; video.height=“XXXpx“; 这样是得不到你要的效果，即使代码没有报错。
如何制作一个完美的全屏视频H5
大转转FE
07-14 1174
写在前面的话：最近一波H5广告火爆整个互联网圈，身为圈内人，我们怎能 不！ 知！道！:( 嘘！真不知道的也继续看下去，有收获 ↓ ）So，搞懂这个并不难。这篇文章...
WebView 支持 Html5 video 进行全屏播放
像风一样自由
12-05 6129
原文https://segmentfault.com/a/1190000007561455 用过WebView的开发者们肯定都知道这里面的坑数不胜数，加载缓慢，内存泄露，文件选择......没错，全屏播放视频，这又是一个大坑。一个没有修饰过的原生WebView几乎不可能在某一个主流视频网站实现全屏播放，倘若在客户端自己实现简单的播放器，链接拿过来，摆个VideoView，想怎么全屏怎么全屏，放在
html5播放器自动全屏,HTML5 video播放器全屏(fullScreen)实现的方法
weixin_39756273的博客
05-31 2303
这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下首先来说，这个标题具有误导性，但这样设置改标题也是主要因为video使用的比较多在html5中，全屏方法可以适用于很多html 元素，不仅仅是video全屏问题*{padding: 0px;margin: 0px;}body p.videobox{width: 40...
videojs-h5手机端h5播放器
05-24
在移动端，videojs可以通过h5技术实现视频播放器的功能，而videojs-h5则是一个专门为移动端开发的videojs插件，它可以优化视频播放器的性能、界面和交互体验，特别是在手机端的H5应用场景下，可以更好地适应用户的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值