video标签点击视频全屏播放

最新推荐文章于 2024-04-13 09:22:48 发布
最新推荐文章于 2024-04-13 09:22:48 发布
阅读量1.4w 收藏 29
点赞数 14
分类专栏： html 文章标签： html5 javascript css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47918831/article/details/118963480
版权

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

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

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

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

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

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

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

小前端半半
关注
  • 14
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
react-native-video实现视频全屏播放的方法
08-27
主要介绍了react-native-video实现视频全屏播放的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
video全屏背景视频播放特效
07-24
video全屏背景视频播放特效是一款大气全屏的视频播放，视频为背景的文字内容布局。
HTML5 video播放器全屏(fullScreen)方法实例
09-28
主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下
前端实现页面全屏效果
liuzemtx的博客
10-27 3512
前端实现页面全屏效果 代码写的比较烂，大哥们别骂我 //全屏按钮 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
HarmonyOS NEXT视频全屏切换案例_鸿蒙video 全屏播放(2)
最新发布
2401_84164699的博客
04-13 1088
本示例介绍了Video组件和接口实现媒体全屏的功能。该场景多用于首页瀑布流媒体播放等。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
video 按钮全屏
YUlangML的博客
08-30 1569
监听是否退出或进入全屏：（在video上绑定bindfullscreenchange事件）
video自动全屏html5,HTML5 video进入全屏和退出全屏的实现方法
weixin_42413624的博客
05-30 1326
当我们使用video标签的时候，有时候因为更多的需要，我们要自己自定义控制栏，而进入和退出全屏也是其中的一部分不同的浏览器有不同的实现方法// webkitelement.webkitrequestfullscreen();//进入全屏document.webkitcancelfullscreen();//退出全屏// firefoxelement.mozrequestfullscreen();d...
video标签点击播放时直接全屏显示，播放完成后变成之前的样子
sdaulee的博客
10-27 5658
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
video视频点击全屏播放设置
aosu9798的博客
03-23 985
// 反射調用 var invokeFieldOrMethod = function(element, method){ 　　var usablePrefixMethod; 　　["webkit", "moz", "ms", "o", ""].forEach(function(prefix) { 　　　　if (usablePrefixMethod) r...
video 全屏播放
qq_46302247的博客
05-23 629
<template> <div class="demo5"> <video :src="require('@/assets/video/loginBg.mp4')" muted autoplay loop></video> </div> </template> <script> export default { data() { return {}; }, methods: {
video全屏播放
q1003675852的博客
12-01 641
如果在事件处理程序中有一个video元素的播放操作，浏览器可能会在播放操作之前执行其他的操作，例如更新页面布局或执行其他的JavaScript代码。这样可以确保在播放视频之前，浏览器已经完成了其他的操作，从而避免了可能的冲突。需要注意的是，这种情况可能因浏览器和设备而异。不同的浏览器和设备可能有不同的异步处理机制，因此在某些情况下，可能不需要使用setTimeout间隔。在某些情况下，点击事件和video播放之间需要使用setTimeout间隔才能正常打开播放，可能是由于浏览器的异步处理机制导致的。
禁止iPhone Safari video标签视频自动全屏的办法
09-03
本篇文章给大家分析有没有办法禁止iPhone Safari video标签视频自动全屏，以下给出好多种情况分享，感兴趣的朋友可以参考下
html采用video播放hls视频流
10-13
1、本文详细描述了html采用video播放hls视频流的方法及源代码。 2、通过详细示例，让读者更直观地阅读，更清晰的理解。 3、示例代码可直接复制，编译后可直接运行。 4、根据示例以及运行结果，让读者加强记忆及...
前端css样式问题整理
BluerCat的博客
11-23 393
object-fit object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。 object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。 菜鸟教程地址 属性 描述 fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 contain 保持原有尺寸比例。内容被缩放。 cover 保持原有尺寸比例。但部分内容可能被剪切。 none 保留原有元素内容的长度和宽度，也就是说内容不会.
html中控制video标签全屏
热门推荐
baidu_24545901的博客
11-26 2万+
全屏问题 *{     padding: 0px;     margin: 0px; } body div.videobox{     width: 400px;     height: 320px;     margin: 100px auto;     background-color:#000; } body div.videobox video.v
HTML中 video标签样式铺满全屏
qq_63608386的博客
03-12 1462
video标签默认不是铺满的，即使手动设置宽高100%也不会生效，所以当需要video铺满div时，需要加上一个css样式stylewidth100%;height100%;
h5使用video标签解决自动全屏问题
qq_24978681的博客
10-19 9546
h5使用video标签解决自动全屏问题
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、付费专栏及课程。

余额充值