video 去掉播放按钮并循环播放 可替代gif

已于 2023-02-07 09:26:54 修改
阅读量1.1k 收藏 1
点赞数 1
分类专栏： Vue 文章标签： vue.js video
于 2022-10-12 20:25:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Originally_M/article/details/127289894
版权
vue 中想用gif又觉得gif太大，可以来试试用视频替代gif
  <video style="width: 100%;height: 100vh;-o-object-fit: cover;object-fit: cover;display: block;" x5-playsinline="" playsinline="" webkit-playsinline="" autoplay="true" loop :poster="bannerImg" muted>
     <source :src="require('../../assets/mp4/meet20-banner.mp4')" type="video/mp4" >
  </video>
最初都是小白
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html采用video播放hls视频流
10-13
1、本文详细描述了html采用video播放hls视频流的方法及源代码。 2、通过详细示例，让读者更直观地阅读，更清晰的理解。 3、示例代码可直接复制，编译后可直接运行。 4、根据示例以及运行结果，让读者加强记忆及理解。
Video第一次播放结束后播放按钮不再显示无法重复播放
01-19
Video第一次播放结束后播放按钮不再显示无法重复播放
H5网页中的video标签不能自动播放并且play或者click播放按钮无效的原因及解决办法
最新发布
先飞网校
02-05 962
于是，获取video标签，然后静音：video.muted=true;然后再播放：video.play()获取按钮和video都是可以的，但是无法进行下一步，除非有互动动作，比如点击一下页面任意位置。2、用js获取video标签，play。1、用js获取播放按钮，click；
修改video标签默认样式问题video播放器样式优化；video播放器默认显示图片
zhangzuying的博客
12-07 9519
需求： 1.播放器可以支持上传默认封面图片 2.播放器的进度条长度拉长些,与播放器长度一样长，或者其他方式美化一下 首先需求1.播放器可以支持上传默认封面图片解决方案： 1.第一种方法可以直接在video标签中直接添加poster属性 <!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg" controls="controls" poster="../../imgs/poster.png"> you
安卓手机浏览器_强大的浏览器，手机必装，安卓、IOS都有！
weixin_39798579的博客
11-17 830
大家好，我是互联网分享者小编茂茂，无论任何一款智能手机，除了微信，QQ，支付宝还会必备一款软件，那就是浏览器，应用市场上的浏览器真的多不胜数，知名的浏览器都有自己的独特的价值和主打的功能，这也导致每款浏览器都有一批忠实的用户。大多数人的手机安装都是一些大众的浏览器百度，或者自带浏览器，如UC浏览器，qq浏览器等，但是每次想要搜索自己想要的内容时，总是有一大堆广告内容推送。其实搜索能力的提...
HTML5之Video对象属性和方法（html5播放器设计必须研究的）
阿酷tony
11-19 3718
准备研究下html5视频播放器，html5音视频播放器开发设计必须研究的东东，整理出来，会用到的。阿酷。。。。 Video实例 &lt;video src="movie.ogg" controls="controls"&gt; 您的浏览器不支持 video 标签。 &lt;/video&gt; 浏览器支持 注释：Internet Explorer 8 以及更早的版本不支持 &lt;vid...
video 自定义视频播放控件的显示和隐藏
细节怪的博客
02-24 4466
自定义视频播放控件的显示和隐藏，以及显示隐藏的过渡效果
控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）
weixin_43422861的博客
08-17 4031
video
video 标签设置样式
zyf13671493506的博客
10-17 5083
设置video标签的默认样式 在这里插入图片描述 //全屏按钮 video::-webkit-media-controls-fullscreen-button { // display: none; } //播放按钮 video::-webkit-media-controls-play-button { } //进度条 ...
新版chrome浏览器video播放去掉自带的“播放速度，下载”按钮，去掉右下角三个点
weixin_39725702的博客
10-23 3179
问： 新版chrome浏览器如何去掉video播放自带的“播放速度”按钮 答： 给video设置属性 controlsList=‘nodownload noplaybackrate’ <video controls src="1.mp4" controlsList="nodownload noplaybackrate"></video>
CSS video控件去掉视频播放条
蓝胖子的博客
12-08 799
CSS video控件去掉视频播放条
html5自定义video标签的海报与播放按钮功能
11-21
1.默认播放按键不好看 2.设置自定义封面图 以上这两点都想自定义 二、思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三、步骤分解 1.海报图片作为div的背景 注：无论是横图还是竖图，都希望按原...
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
10-15
主要介绍了微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
HTML5 video循环播放多个视频的方法步骤
11-20
最近在开发中遇到的需求是：微信扫描课件二维码，播放其对应的课件视频 设计流程 1.扫描二维码时，将其视频列表存入model中，存入第一条是为了，不在html界面重新获取第一条视频 model.addAttribute("playUrl", ...
vue——element-ui项目中用如何点击导航菜单进行当前页面的router切换？图解只需三步！
热门推荐
最初都是小白
06-25 1万+
先给大家模拟一下场景： 想要的效果： 下面来看需要配置项    使用element-ui的 NavMenu导航，里面的菜单属性里有详细的介绍。 第一步配置属性，并把每一项的index改为想要跳转的path： 第二步在Home页加上< router-view />插槽： 第三步查看路由配置： ...
v-for中key的作用：为什么使用v-for时必须添加唯一的key属性
最初都是小白
05-07 1万+
key的作用：   key是为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的key属性。 先来举个例子： 一、没有加key： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
VUE指令及用法大全——（一）插值表达式
最初都是小白
04-08 1万+
  插值表达式
当使用vue-cli创建项目报错信息为：“serve with message ‘spawn vue-cli-service ENO’...”时的解决方法
最初都是小白
06-20 8432
今天在做项目的遇到了一个这样的报错信息：   出现这个问题的场景是我通过vue3.0版创建项目，然后在创建完成后，我安装了一个element-ui按需加载的一个 babel-plugin-component 。   这个问题之前也遇到过，大概分析它是因为当你安装的时候可能用的npm进行安装，然后cli内部的有可能和它不一致，所以会报这个错。 解决方法:   解决方法也很简单就是统一安装的方法：...
解决vue中在使用element-UI的MessageBox.confirm()时刷新页面就弹出提示框问题
最初都是小白
05-18 6197
问题：只要用到MessageBox.confirm()，在页面刷新时就会自动弹出 正常应该是点击这个dialog的关闭才弹出 解决办法： 因为我是按需加载引用的element-ui : 按需引用代码： import { MessageBox, } from "element-ui"; Vue.component(MessageBox.name, MessageBox); //使用这种方法引用 ...
uniapp video 自定义播放按钮
08-31
在uniapp中，可以通过以下步骤来实现自定义播放按钮： 1. 首先，在data中定义一个变量startVideo，用于控制是否显示中间的播放按钮，并将其初始值设置为true。 2. 在视频播放时，可以使用video组件的play事件来触发一个方法，比如playFun()。在该方法中，将startVideo设置为false，以隐藏中间的播放按钮，并将contimg设置为true，以显示下方的播放、暂停等控制按钮。 3. 在模板中，使用v-if指令来根据startVideo的值来显示或隐藏中间的播放按钮。例如，如果startVideo为true，则显示自定义的播放按钮。 以下是示例代码： ```javascript data() { return { startVideo: true, contimg: false } }, methods: { playFun() { this.startVideo = false; this.contimg = true; } } ``` ```html <template> <view> <video src="your_video_url" @play="playFun"></video> <view v-if="startVideo" class="custom-play-button"></view> <!-- 其他控制按钮 --> </view> </template> ``` 在上述代码中，当视频开始播放时，playFun方法会被触发，将startVideo设置为false，从而隐藏中间的播放按钮。同时，contimg被设置为true，以显示其他控制按钮。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Uniapp自定义video播放按钮并结合swiper图片](https://blog.csdn.net/weixin_45389051/article/details/111077681)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值