video标签点击视频全屏播放

最新推荐文章于 2024-09-26 16:05:52 发布
最新推荐文章于 2024-09-26 16:05:52 发布
阅读量1.5w 收藏 30
点赞数 18
分类专栏： html 文章标签： html5 javascript css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47918831/article/details/118963480
版权
本文记录了一位前端开发者如何在Vue封装的表格组件中实现点击视频元素即全屏播放的功能。通过在video标签上添加定位的div，并绑定click事件，利用requestFullscreen()方法进入全屏模式，并结合play()事件实现视频播放。这一解决方案巧妙地解决了video标签原生click事件无效的问题。
摘要由CSDN通过智能技术生成

早上一来有一个小需求，业务部需要点击表格里面的视频就可以全屏播放，然后我就去看了需求页面

 video标签不是有一个控件可以全屏播放吗，为啥还要点击视频元素，别问，打工人服从安排

因为我是用vue框架自己封装的table组件，所以直接在table里面修改

 因为在video标签上绑定click事件无用，就在下面加了一个空div，使用position定位到video元素上，然后把click事件绑定到这个div上，然后把当前元素的唯一id传到这个函数里

 requestFullscreen()方法用来在全屏模式下打开一个元素。

函数里直接获取了当前点击的视频元素，在使用requestFullscreen() 方法来使这个元素全屏，因为业务部需要全屏并播放，所以我加上了play()事件播放。

以上就是简单的完成这个小需求，自己记录一下，学习到一个新的dom方法

小前端半半
关注
专栏目录
HTML5 video播放器全屏(fullScreen)方法实例
09-28
主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下
h5使用video标签解决自动全屏问题
qq_24978681的博客
10-19 1万+
h5使用video标签解决自动全屏问题
video视频标签播放视频时点击或拖拽进度条事件
最新发布
y1059477028的博客
09-26 492
在HTML中，元素，但直接针对鼠标拖拽或点击进度条的事件并不存在。不过，我们可以通过监听元素的 timeupdate事件来间接实现这一需求。
video标签点击播放时直接全屏显示，播放完成后变成之前的样子
sdaulee的博客
10-27 5885
video的两个事件play 和 ended 全屏显示，参考了 版权声明：本文为CSDN博主「CurryChou777」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/m0_37727560/article/details/106024057 最后实现就是： template模板中： <video src="http://haier-dev
css对video进行满屏设置
Lipn_的博客
10-12 3932
css设置视频满屏播放
video视频播放自动进入全屏模式
weixin_42401268的博客
04-26 1193
通过设置 playsinline 有的设备会不生效，可以设置 webkit-playsinline。两个可以同时设置，保证包含所有情况。另外，验证时，发现点击视频的时候会出现切换画中画的按钮，实际需求是不需要的。其中介绍了playsinline属性可以设置视频播放的时候不直接全屏播放。但是每次进入页面，视频加载完成播放的时候，会直接进入全屏模式播放。同过mdn查询video标签的参数发现并没有相关介绍。混合开发， 原生使用webview内嵌h5页面。转移思路，查询多媒体相关的设置。
video 按钮全屏
YUlangML的博客
08-30 1704
监听是否退出或进入全屏：（在video上绑定bindfullscreenchange事件）
禁止iPhone Safari video标签视频自动全屏的办法
09-03
总结起来，尽管开发者社区提出了许多尝试和建议，但在当前的技术环境下，无法完全禁止iPhone Safari浏览器中的`<video>`标签视频自动全屏播放。如果你需要在网页上实现非全屏视频播放，可能需要考虑其他设计策略或者...
wpf全屏播放视频.rar_WPF_sortou1_wpf视频播放_全屏播放_视频
07-14
总的来说，这个压缩包提供了一个在WPF环境中实现多视频全屏播放功能的实例。通过MediaElement控件和适当的事件处理，开发人员可以轻松地在自己的应用中实现类似的功能。学习和理解这一示例将有助于提升对WPF多媒体...
Android webview全屏播放HTML video
10-02
本话题主要关注如何在Android的Webview中实现HTML5的video标签全屏播放功能，这在开发多媒体应用或者集成在线视频服务时尤其重要。 首先，了解HTML5的`<video>`标签。这是HTML5标准中引入的一个新元素，用于在网页...
video全屏播放
q1003675852的博客
12-01 747
如果在事件处理程序中有一个video元素的播放操作，浏览器可能会在播放操作之前执行其他的操作，例如更新页面布局或执行其他的JavaScript代码。这样可以确保在播放视频之前，浏览器已经完成了其他的操作，从而避免了可能的冲突。需要注意的是，这种情况可能因浏览器和设备而异。不同的浏览器和设备可能有不同的异步处理机制，因此在某些情况下，可能不需要使用setTimeout间隔。在某些情况下，点击事件和video播放之间需要使用setTimeout间隔才能正常打开播放，可能是由于浏览器的异步处理机制导致的。
video全屏操作栏自定义样式&&js 指定元素全屏&&视频截图下载
jinse29的博客
02-24 4521
最近遇到的需求就是重新video标签的控制栏的样式，包括进度条、音量、倍速、全屏等样式，在正常状态下，可以将原生样式隐藏掉自定义新的控制栏元素定位上去，但是全屏后样式失效，出现的还是原生的控制栏。只能曲线救国，说白了就是让video的父级全屏，进而让video也屏，控制栏的自定义组件样式定位上就可以了。具体是f12 可以看出，自定义的组件其实还在原先的位置，全屏后的video新增的伪类和样式无法修改，未全屏状态下自定义控制栏的组件样式。全屏后，发现控制栏已经变成原生的样式。
HTML中video标签铺满全屏！
FENGZXCjjjjj的博客
06-09 1566
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。video标签默认不是铺满的，即使手动设置宽高100%也不会生效，所以当需要video铺满div时，需要加上一个css样式。object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。关键是这个“object-fit: fill”，这样就可以解决了！fill: 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
原声js控制浏览器全屏或者退出全屏
qq_41114603的博客
09-29 1316
开启全屏 if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } //FireFox else if (document.documentElement.mozRequestFullScreen) { document.docum...
video的全屏事件
m0_69439101的博客
09-15 1243
【代码】video的全屏事件。
前端实现页面全屏效果
liuzemtx的博客
10-27 3582
前端实现页面全屏效果 代码写的比较烂，大哥们别骂我 //全屏按钮 function fullScreen() { var width = window.screen.width; var height = window.screen.height; //vue获取元素并给元素赋值 var video = this.$refs.backVideo; //vue用ref获取元素 video.style.width = width video.style.height = h
HTML中 video标签样式铺满全屏
wsdshdhdhd的博客
07-22 1万+
video标签默认不是铺满的，即使手动设置宽高100%也不会生效，所以当需要video铺满div时，需要加上一个css样式
video 全屏播放
qq_46302247的博客
05-23 711
<template> <div class="demo5"> <video :src="require('@/assets/video/loginBg.mp4')" muted autoplay loop></video> </div> </template> <script> export default { data() { return {}; }, methods: {
H5 video标签 全屏播放各属性测试+兼容处理记录
热门推荐
H舞
03-23 1万+
video标签真是个神奇的属性，每次处理兼容都搞得人很头疼，H5移动端视频处理个人理解可以拆分为单独的一块，不同与其他H5功能，好比canvas一样，往小了看是简单的小视频播放（快手、抖音之类）。进一步可以演变为播放器嵌套，比较有名的例如B站开源的flv.js，之前笔记详情使用过，解决了flv格式文件video标签不支持播放问题。再进一步可以演化为视频直播类H5，16年末的时候看过上海一家直播类H...
uniapp安卓端点击video标签全屏播放
05-18
在 Uniapp 中，可以使用 `uni.createVideo` 方法来创建视频，然后调用 `requestFullScreen` 方法来请求全屏播放。具体实现步骤如下： 1. 在页面中创建 video 标签 ```html <video id="myVideo" src="http://example.com/myvideo.mp4"></video> ``` 2. 在页面的 `mounted` 生命周期中，使用 `uni.createVideo` 方法创建视频对象，并将其绑定到页面的 data 中。 ```javascript mounted() { this.videoContext = uni.createVideoContext('myVideo', this); }, data() { return { videoContext: null } } ``` 3. 绑定一个点击事件，在点击时调用 `requestFullScreen` 方法请求全屏播放。 ```html <video id="myVideo" src="http://example.com/myvideo.mp4" @tap="playVideo"></video> ``` ```javascript methods: { playVideo() { this.videoContext.requestFullScreen(); } } ``` 这样，点击视频标签后，视频将会全屏播放。注意，全屏播放需要用户手动点击确认，而且在 iOS 上，全屏播放只能在用户交互的情况下触发。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值