vue-video-play在微信公众号中同层播放

最新推荐文章于 2023-08-03 16:21:20 发布
最新推荐文章于 2023-08-03 16:21:20 发布
阅读量410 收藏
点赞数
分类专栏： 微信公众号 文章标签： javascript vue.js 小程序 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44804557/article/details/113436117
版权

vue-video-play在微信公众号中同层播放

由于x5内核中 x5-playsinline 与 x5-video-player-type 不能同时存在
官方描述
找到安装的vue-video-player包下的该文件
在这里插入图片描述
将这里设置x5-playsinline属性的代码删除即可
在这里插入图片描述

旅程丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js 在微信公众号内实现视频播放
黑山老妖的小站
12-21 9815
环境：我司从事在线教育行业，想要将老师的讲课视频实现在线播放并监控用户播放时长 关键词：vue.js、微信公众号、video视频播放 1. 微信公众号内可以直接使用video进行视频播放 2. 微信公众号内的视频无法自动播放，即使你加了autoplay="true"，网友们说可以将视频上传至腾讯视频，我们服务器是阿里云所以没尝试 3. ios手机中的播放可以不全屏播放，但是安卓手机点击播放
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
10-15
主要介绍了vue-video-player 解决微信自动全屏播放问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+videojs+微信移动端的一些问题
qq_37876304的博客
12-03 1618
vue+videojs视频播放移动端总结 说明 项目需要在微信公众号中播放视频,也可以使用 vue-video-player 插件来处理,这里使用videojs来处理,以及一些遇到的问题/ 一、videojs使用 videojs在vue的基本使用方法???? 二、video在移动端微信中横屏显示 1. h5新属性 <video ref="video" id="my-video" class="video-js vjs-default-skin vjs-big-play-c
video同层播放层级过高遮挡模拟暂停按钮的问题
weixin_34232744的博客
12-20 1629
在ios和android上有显示的区别，如果你只是显示一个普通的网页，只需要在iOS上加上webkit-playsinline="true" 安卓上x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint"，即可实...
Vue3移动端web页面video标签使用及适配（点击或自动播放）
最新发布
qq_43145310的博客
08-03 2924
video标签自动播放和点击播放
vue-video-play.rar
11-20
这个压缩包"vue-video-play.rar"可能包含了该组件的源代码、示例、文档和其他相关资源，虽然描述中提到“不要下”，但为了理解Vue Video Play的工作原理和使用方法，我们依然可以探讨相关的知识点。 首先，Vue.js ...
vue中使用微信公众号js-sdk踩坑记录
10-17
主要介绍了vue中使用微信公众号js-sdk踩坑记录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
[转]用vue写的一个微信公众号菜单配置
11-16
用vue写的一个微信公众号菜单配置 框架 vue + elementUI + mockjs
vue3视频播放插件vue3-video-play的具体使用方法
qq_66402154的博客
09-15 7969
vue3-video-play的使用，vue中视频播放器
解决微信浏览器video标签自动播放视频失效
weixin_44694538的博客
03-13 9398
正常在浏览器好好的视频，在微信内置浏览器中点击播放全屏，样式也不一样，自动播放失效。罪魁祸首是微信把video标签都成微信规则的了。下面方式可以解决视频播放全屏以及不能自动播放的问题。 <video id="videoPlay" class="video" autoplay="autoplay" playsinline="true" preload="auto" poster=""...
微信视频播放器隐藏播放控件，视频全屏做法分享
博客
08-22 4661
转自：https://www.haorooms.com/post/weixin_hidevideo_control 本人实测有效。为了防止以后还要用到，到时候找不到，所以转载一下。 前言 平时项目中视频播放用的不多，以至于前段时间h5婚礼邀请函视频部分，微信中一直去除不了微信播放器控件，导致视频播放结束甚至还有广告产生。以为要设置域名白名单，腾讯相关域名才能解决这个问题。为此，之前还写了一篇...
微信小程序视频播放插件vue-video-player使用兼容移动端
qq_37173215的博客
04-22 4987
在工作中需要视频播放功能，因为前端用的vue全家桶，经过技术筛选之后决定用vue-video-player插件实现。 一.视频插件引入 1.在项目目录下安装插件 npm i vue-video-player -D 安装依赖 2.引入插件有两种方式 （1）在main.js里引入 import VideoPlayer from 'vue-video-player' require('video.js/...
vue项目微信公众号，小屏播放，video层级过高的坑
浅墨
04-17 1679
众所周知，video标签兼容性是真的差，特别是遇到安卓微信浏览器， 小屏播放，video层级过高，视频播放的时候其他HTML被覆盖 <video controls style="object-fit:fill;width: 100%;height: 3.5rem;" class="videosrc" ref="videoPla...
vue vue-video-player 利用弹出框实现视频播放
热门推荐
fj101229的博客
06-28 3万+
一、在main.js  引入vue-video-player import VideoPlayer from 'vue-video-player'Vue.use(VideoPlayer)二、Player组件&lt;template&gt; &lt;div class="container"&gt; &lt;div class="player"&gt; &lt;video-play...
vue视频播放器 组件
weixin_34128411的博客
02-24 2980
github地址：https://github.com/liuying1214/vue-video-playerdemo地址：https://liuying1214.github.io/vue-video-player/demo/
vue微信公众号项目怎么运行在微信开发者工具里
06-08
对于Vue微信公众号项目，可以按照以下步骤在微信开发者工具中运行： 1. 在你的Vue项目根目录下，运行命令`npm run dev`或`yarn dev`，以启动本地开发服务器。 2. 打开微信开发者工具，点击左上角的“新建项目”按钮。 3. 在新建项目页面中，选择“微信公众号”，输入AppID和项目目录，点击“确定”按钮。 4. 在新建成功后，点击微信开发者工具左侧的“详情”按钮，勾选“使用npm模块”选项，并在“项目根目录”下输入你的Vue项目目录，如`./my-vue-project`。 5. 在微信开发者工具左侧的“项目”选项卡中，选择“工具” -> “构建npm”，等待构建完成。 6. 在微信开发者工具左侧的“项目”选项卡中，选择“开发者工具” -> “开发者工具设置”，设置“请求域名”和“上传域名”。 7. 点击微信开发者工具左侧的“预览”按钮，即可在微信开发者工具中预览你的Vue项目。 注意：在微信开发者工具中预览Vue项目时，需要在`vue.config.js`文件中配置代理，以避免跨域问题。在`vue.config.js`文件中添加如下代码： ``` module.exports = { devServer: { proxy: { '/api': { target: 'https://your.api.server', changeOrigin: true, }, }, }, }; ``` 上述代码中，`/api`表示请求的接口路径，`https://your.api.server`表示实际的API服务器地址。当开发环境中请求`/api`路径时，会自动转发到`https://your.api.server`地址。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值