css覆盖h5元生video样式方法

最新推荐文章于 2024-05-17 17:05:58 发布
最新推荐文章于 2024-05-17 17:05:58 发布
阅读量755 收藏
点赞数
分类专栏： 前端布局 文章标签： css html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h33413398/article/details/115227768
版权

现在最好的前端视频播放器就是h5元素video,该播放器会有一些原生样式在开发中需要去覆盖掉，只需加下面2行代码即可让自己样式覆盖掉元素样式

video {
  object-fit:cover;
  outline:none;
}
ps:想让视频自动播放则必须同时设置静音，否则无效(浏览器为了用户体验，设置的)
骜然
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现简单的原生的video播放器并控制和样式
Alicesa的博客
09-04 1254
代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .{ font-family: "微软雅黑"; } #box{ margin-left: 500px; } li { list-style: none;
html覆盖video,覆盖HTML5视频上的元素(Overlaying elements over HTML5 video)
weixin_30994671的博客
06-09 1348
覆盖HTML5视频上的元素(Overlaying elements over HTML5 video)我对CSS和HTML5比较陌生，想看看如何在视频上叠加HTML文本或其他元素。 我继承并修改了某人的代码，当我在JSFiddle上玩它时它似乎正常工作 - https://jsfiddle.net/jxavLps5/但是当我通过我的本地瓶子(WSGI)托管时我无法正常工作服务器 。 我有以下HTM...
原生h5+css3 实现简单视频播放器组件
rufeike的博客
10-20 4342
视频播放器组件案例 实现效果 实现功能 全屏切换 进度条点击跳播 音量点击设置大小 涉及知识点 video对象属性 .duration 获取视频总长度（秒） .currentTime 当前播放时间（秒） .volume 获取音量或设置音量 （值0-1) .paused 是否暂停状态 （true/false) video 对象方法 .play() 播放 .pause() 暂停 ...
video层级太高向上滑动遮住自定义导航栏
最新发布
weixin_73854956的博客
05-17 242
【代码】video层级太高导致向上滑动遮住自定义导航栏。
小程序video和live-player 覆盖样式
Mr_wuying的博客
06-04 3404
程序的video和live-player 不会被view标签覆盖，即使用了z-index也不行。 官方有说明。 cover-view 覆盖在原生组件之上的文本视图。 可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher 只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性...
video标签样式铺满全屏
热门推荐
linfng023的博客
04-19 8万+
video标签是不会自动铺满整个div的，即便是给它设置了高度为100%；所以当需要video标签铺满整个div时，可以给video标签加上‘object-fit:fill’样式，这样就可以解决了！ <div class="videoContent"> <video class="videoElement" controls preload="auto" width="100%" height="100%"></video> </div> .video
css3和h5实现王者荣耀官网
08-25
使用H5的语义化标签，结合CSS3的布局和样式，可以构建出既美观又易用的头部。 2. **主体内容**：王者荣耀官网可能包括新闻动态、英雄介绍、游戏攻略等模块，通过CSS3的布局技术如Flexbox或Grid，可以轻松实现各部分...
H5，CSS，JS实例
09-06
2. CSS3样式：应用渐变、阴影、边框 radius、过渡效果、动画等，实现美观的视觉效果。 3. JavaScript交互：利用事件监听、DOM操作、Ajax请求，实现动态更新内容、用户交互功能。 4. 响应式设计：通过媒体查询调整...
HTML5 video播放器全屏(fullScreen)方法实例
09-28
CSS部分设置了视频容器的样式，并为全屏模式下的视频元素定义了样式，确保在全屏时视频能填充整个屏幕。 JavaScript部分是实现全屏功能的关键。`invokeFieldOrMethod`函数通过遍历不同的浏览器前缀（如`webkit`、`...
H5 与CSS3.0
07-28
在实践部分，"H5与CSS3基础教程源码"这个压缩包可能包含了各种示例代码和项目，帮助学习者理解并应用这些概念。通过实际操作，你可以更深入地了解HTML5的新元素如何工作，以及CSS3的特性如何提升网页设计的质量。这...
additional_page_2.rar_css_h5_page
09-15
下面我们将深入探讨CSS和H5在构建这种页面时的关键知识点。 **HTML5（HyperText Markup Language 5）** HTML5是目前Web开发的标准标记语言，它的主要改进包括更好的语义化标签、离线存储、媒体元素增强、图形绘制和...
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
11-21
对于vue-video-player，从github上找到一段代码，直接放页面！可以了，视频展示出来了！开始下一个功能。。。。 这可能是大部分前端开发者一贯的思维模式，拿来一个插件，看着demo就做出来了，功能展示正常就OK了，但是一旦出了bug，就会面向百度编程或者面向Google编程！ 其实，我也是这样的，哈哈哈哈….. 废话不多说，最近在做一个视频播放的功能，找到vue-video-player插件后，咔咔咔完事，拿着我的爱疯，完美演绎！但是其他人的国产某牌手机，展示的完全不一样，打开后自动全屏，而且还有个横竖屏控制。“这是我写的页面？？？？？”，心中一万只神兽在奔腾。横竖屏切换后，视频
自定义video播放组件-可全屏可加速兼容移动端
10-21
自定义video播放组件，自写控制条，可全屏观看，可调节播放倍速，兼容移动端
小程序video组件的自定义全屏/兼容安卓机的黑边填满容器/video全屏时自定义按钮被覆盖
dghgjuyhuoyho的博客
11-23 3369
1.自定义全屏按钮被覆盖 按钮标签必须在video组件里全屏的时候才能显示出来, 2.在安卓机里视频有黑边 首先需要在video标签写入 x5-video-player-type="h5" object-fit='cover'style="width= 100%; height=100%"这样在安卓机里就不会有黑边了 3.自定义全屏事件(在真机调试或者预览时会有问题但是!!!打包发布测试服后是正常的) <video id="myvideo" :c...
h5直播和小程序直播使用video标签造成字幕被视频遮住覆盖的以及手机适配的问题解决方法
sinat_25884075的博客
09-13 1887
道路千万条，安全第一条 改了好多，之前用web也做过，但都没遇到这么多问题，这次是用百度小程序做的直播单间 坑不是很多，是到处都是 话不多说，看解决方法 ———————————————————————— 理清楚加载顺序很重要 1，让video标签最先渲染 在vue或者小程序中先这样 ： onReady:function () { this.videoContext = s...
海创软件组-两周小结-video-vue-全屏-hover样式-css变量
m0_46627730的博客
05-02 724
写这篇博客来总结一下两周遇到的问题吧。 一、视频组件 由于往后的日子需要做一个交通管理系统，需要使用到视频播放器，所以花了点时间在视频组件上。 视频播放器，我一般都是采用video.js和他的插件vue-video-player两种方式创建的。 首先就先说一下如何使用video.js吧 1：video.js 需求：对于简单的视频播放需求来说，video.js足以胜任了。 它可是支持HTML5和Fl...
微信小程序 video 全屏时 覆盖在原生组件之上的内容 不显示
xjh的博客
04-20 1925
小程序提供了俩个标签 cover-image： 覆盖在原生组之上的图片视图 cover-view：覆盖在原生组件之上的文本视图 需要将需要覆盖在video之上的标签 放到video标签内 <video id="myvideo" title="视频" autoplay src="视频地址" > <cover-view class="anthology">选集</cover-view> <cover-vie.
video标签遮挡div android,H5页面原生video标签移动端禁止全屏播放
weixin_39546520的博客
05-26 520
制作移动端H5，需要添加视频，点击播放的时候会自动全屏播放，记录一下处理局部播放的问题。标签写法：x5-playsinline="true" //安卓需要设置的属性playsinline="true" //ios需要设置的属性webkit-playsinline="true" //ios10需要设置的属性preload="aut...
Video标签上面覆盖播放按钮点击播放
一叶一菩提的博客
02-23 768
直接复制就可以跑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> .div1{ width:100
h5 video 美化
09-06
H5视频美化是在网页中使用HTML5标签和CSS样式来提升视频播放的外观和用户体验。在进行H5视频美化时，我们可以通过以下几个方面来实现。 首先，可以通过CSS样式来修改视频的外观。可以设置视频的尺寸、边框样式、阴影效果等，使其更符合网页的整体设计风格。此外，还可以设置视频的透明度、动画效果等，增加视频的吸引力。 其次，可以添加自定义的控制按钮和导航栏。通过CSS和JavaScript的配合，可以自定义视频播放器的控制按钮样式，如播放/暂停按钮、音量控制按钮、全屏模式按钮等。同时，还可以添加自定义的导航栏，提供更多功能选项，如播放速度设置、画质切换、字幕设置等。 还可以为视频添加特效。通过CSS的过渡效果和动画属性，可以为视频的播放、暂停、全屏等事件添加过渡效果和动画效果，使其更加流畅和生动。此外，还可以添加视频的滤镜效果，如黑白、模糊、饱和度调节等，使视频呈现出不同的风格和效果。 最后，在视频播放之外，还可以添加附加功能，如视频列表、推荐视频、相关视频等。通过HTML和CSS的结合，可以自定义视频列表的样式，并通过JavaScript实现视频列表的切换和自动播放功能。同时，还可以根据用户的观看历史和兴趣，推荐相关的视频，增加用户的参与度和留存率。 总之，通过使用HTML5和CSS样式，我们可以对H5视频进行美化处理，从而提升用户体验和网页的视觉效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值