微信H5视频/VIDEO/全屏/不全屏/自动播放等相关问题

最新推荐文章于 2024-05-22 11:58:11 发布
最新推荐文章于 2024-05-22 11:58:11 发布
阅读量2.9w 收藏 20
点赞数 1
分类专栏： 前端 文章标签： 微信 视频 全屏 自动播放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hf123lsk/article/details/78920211
版权

做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步，自动全屏，不能全屏，不能自动播放，Android，IOS，巴拉巴拉……多到令人发指！今天整理了一下相关的解决办法，以上并不是全部解决了，但是起码能打个60分……

第一步:设置 x5­video­player­type 启用Ｈ5同层播放器

通过video属性“x5­video­player­type”声明启用同层H5播放器
x5­video­player­type支持的值类型：h5

<video src="http://xxx.mp4" x5-video-player-type="h5"/>

注意：这个属性需要在播放前设置好，播放之后设置无效

第二部：设置 x5­video­player­fullscreen 全屏方式

视频播放时将会进入到全屏模式
注：声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听 resize 事件
来实现

<video id="test_video" src="xxx" x5-video-player-type="h5" x5-vide
o-player-fullscreen="true"/>

最低0.47元/天 解锁文章
不懂小小彬
关注
  • 1
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
10-15
在本文中，我们将深入探讨如何使用vue-video-player组件在微信环境中解决自动全屏播放以及横竖屏导致的样式错乱问题。vue-video-player是一个流行的Vue.js插件，用于实现视频播放功能，但它可能在某些特定环境下，如...
video视频播放自动进入全屏模式
weixin_42401268的博客
04-26 570
通过设置 playsinline 有的设备会不生效，可以设置 webkit-playsinline。两个可以同时设置，保证包含所有情况。另外，验证时，发现点击视频的时候会出现切换画中画的按钮，实际需求是不需要的。其中介绍了playsinline属性可以设置视频播放的时候不直接全屏播放。但是每次进入页面，视频加载完成播放的时候，会直接进入全屏模式播放。同过mdn查询video标签的参数发现并没有相关介绍。混合开发， 原生使用webview内嵌h5页面。转移思路，查询多媒体相关的设置。
videojs的常见监听事件汇总
zhu_zhu_xia的博客
01-19 4717
var playerVideo = videojs("my-player", options, function onPlayerReady() { videojs.log('Your player is ready!'); this.on("loadstart",function(){ console.log("开始请求数据 "); }) this.on("progress",function(){ console.log("正在...
如何处理video标签不静音自动播放
最新发布
weixin_66198432的博客
05-22 1039
对于video标签的自动播放问题，我们可以使用muted属性进行静音播放，通过JavaScript控制播放行为，或者监听用户的交互事件来决定是否播放视频。我们可以使用video标签提供的play()和pause()方法，在需要播放视频时手动调用play()方法，而不是让其自动播放。通过在video标签中添加muted属性，视频就会默认静音播放，避免了自动播放时的突兀声音。通过监听用户的交互事件，如点击、滚动或滑动等，我们可以在用户主动与网页进行交互时再播放视频，从而避免了自动播放的尴尬。
HTML5 Video 在微信浏览器中播放问题
qq_35972609的博客
11-07 6597
一、 监听video进入/退出全屏播放 IOS和Android有兼容问题 IOS中（IOS 微信浏览器是Chrome的内核） video.addEventListener('webkitbeginfullscreen', function() { // 进入全屏 video.play(); }) video.addEventListener('webkitendfullsc...
video标签使用（全屏的进入和监听）
ys_dd的博客
01-06 8654
<video class="my-video1" id="myVideo1" bindfullscreenchange="screenChange" src="{{ossPath+'video/dunhuang-video202201051033.mp4'}}" controls='controls'></video> 点击进入全屏： showVideo1() { let videoContext = wx.createVideoContext('myVideo1').
监听视频窗口大小变化(resize)实现全屏
阿酷tony
12-02 2520
监听窗口大小变化(resize)实现全屏
[html] HTML5如何监听video的全屏和退出全屏？
歌谣的博客
04-03 2298
[html] HTML5如何监听video的全屏和退出全屏？ 监听fullscreenchange事件 document.addEventListener('fullscreenchange', (event) => { // document.fullscreenElement will point to the element that // is in fullscreen mode if there is one. If there isn't one, // the valu
VideoPlayer解决H5在微信中播放视频弹窗问题的插件
08-11
总的来说，`VideoPlayer` 是一个针对H5在微信中播放视频问题的有效解决方案，它通过自定义播放器和优化用户体验，使得在微信内的视频播放变得更加流畅和可控。通过熟练掌握和应用这个插件，开发者可以提高H5项目的...
HTML5微信播放全屏问题的解决方法
01-19
在ios和安卓手机里的微信下播放视频时，会遇到不少问题，例如需要手动点击，视频才会播放，并且视频会跳出微信框，出现控制条，如果视频不是腾讯视频，播放完毕会出现腾讯视频的广告推送等问题 解决办法：给video...
video在微信浏览器引导用户触摸自动播放解决方案
11-01
video在移动端微信浏览器上会出现全屏的情况，而且无法自动播放（这是由微信官方开发团队设定的，暂无根本解决办法），此Demo是在进入页面时生成一个Dom将video部分进行遮盖，这个Dom可以看作是一个进入页面后的弹窗...
HTML5页面音视频在微信和app下自动播放的实现方法
01-19
纯H5页面在手机端中是无法实现自动播放，移动端浏览器大部分是禁用video和audio的autoplay功能并且，很多移动浏览器也不支持首次js调用play方法进行播放（只有用户手动点播放后暂停，然后用代码进行play可以）。...
Video监听(播放，暂停，进入/退出全屏)
qq_44707265的博客
04-02 2312
播放 var video = document.getElementById('videoPoster'); fullScreen(videoContainer) { videoContainer.play(); }, 暂停 var video = document.getElementById('videoPoster'); fullScreen(videoContainer) { videoContainer.pause(); }, 进入/退出全屏 ## 进入全屏 var video = doc
H5 video 进入全屏和退出全屏
HELLO WORLD
11-03 6813
效果示例 见上图中，video禁用了原生控制条，加载自定义控制条，左侧为关闭，右侧为录像、全屏 以下主要针对全屏功能如何实现。 现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样： // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFu...
vue使用video和vue-video-player并且可实现视频铺满呦
热门推荐
m0_46627730的博客
04-25 2万+
网页放置视频播放器，我一般都是用video.js和它的插件vue-video-player 一：Video.js 需求：对于简单的视频播放需求来说，video.js足以胜任了。 它可是支持HTML5和Flash的视频播放器呦。 1：安装video.js npm install -s video.js 2:在main.js文件中引入相关文件 import Video from 'video.js'...
H5/微信 Video标签移动端播放问题
qq_17627195的博客
03-15 1431
里面的自动播放只能用于IOS，不能用于安卓（目前来说）这个参数不能用，用了的话安卓就失效了。
使用vue-video-player 方法 视频全铺满以及过程中遇到的问题
阿……莫西林杀菌室
04-02 5978
安装、调试、修改效果：安装插件及环境问题：1、安装vue-video-player2、组件使用（全部）还需调整的地方： 效果： 安装插件及环境问题： 1、安装vue-video-player npm install vue-video-player -save 使用中遇到的环境问题： 1、Failed to resolve loader: sass-loader You may need to install it 安装sass-loader cnpm install sass-loader -D cn
解决ios在微信内置浏览器中video播放的全屏问题
蓝色之恋love的博客
08-08 2894
video 标签在部分的安卓微信和iOS的微信浏览器上点击播放会默认全屏展示
新版微信h5视频自动播放
weixin_30606461的博客
12-16 149
微信最近升级了新版本，直播视频不能自动播放，经过了一番探索，发现下列方法可以实现自动播放。 if (typeof WeixinJSBridge == "undefined") { document.addEventListener("WeixinJSBridgeReady", function() { setTimeout(function...
抖音跳转微信/qq/网页h5源码程序
09-19
抖音是一款非常受欢迎的视频分享平台，而抖音跳转到微信、QQ或者网页H5的源码程序可以实现在抖音视频中添加跳转链接的功能。下面是一种实现方式的简要说明： 首先，我们需要在抖音的开发者平台上注册账号，并创建一个应用。通过开发者平台，我们可以获取到抖音的SDK和API相关信息。 其次，我们需要了解抖音的视频分享流程。当用户点击视频分享按钮时，我们需要将跳转链接添加到分享链接中。可以通过SDK提供的接口实现这个功能，将跳转链接和视频信息传递给抖音的分享接口即可。 在跳转链接中，我们可以设置对应的微信、QQ或者网页H5的链接地址。当用户点击分享的视频，在打开视频的同时，也会跳转到我们设置的链接地址，实现从抖音到其他平台或者网页的跳转功能。 当然，在实现这个功能时，我们还需要考虑用户的授权问题。例如，跳转到微信或者QQ时，需要用户授权登录。这可以通过SDK提供的接口来实现，将用户的授权信息传递给对应的平台。 总而言之，抖音跳转到微信、QQ或者网页H5的源码程序需要通过抖音的SDK和API来实现。通过将跳转链接添加到分享链接中，并结合用户的授权信息，我们可以在抖音视频中实现跳转到其他平台或者网页的功能。这样就可以让用户在享受抖音视频的同时，进行更多的交互和体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值