微信浏览器video 全屏播放

fcxh
  • 434

在微信浏览器上, 使用video标签,播放时如何禁止自动全屏。要的是内联播放的效果。

参考:好像微信公众号文章里面的视频可以不全屏播放,如何做到的,如:http://mp.weixin.qq.com/s/13G...

回复
阅读 12.7k
10 个回答

X5禁止自动全屏这个事,属于世界性难题吧……不信你可以翻翻x5论坛,再看看辣个“腾讯浏览服务前端开发”群,天天有人问(大概1小时前还有问的……),但是除了一句“腾讯白名单”,没有其它解。

公众号里那个应该是调的是腾讯视频开放平台的接口,不介意打Logo和贴片广告的话就可以用,视频传到腾讯的视频平台上就行,文档


稍微补充点资料:

图片描述
图片描述
图片描述
图片描述
图片描述

<video -webkit-playsinline></video>

亲测!设置-webkit-playsinline是必要的,但是还有个更重要的就是需要微信将你的页面的URL添加到他们的白名单里面, 这样在播放的时候就可以不全屏了。所以要不你能将你的页面丢在指定的白名单域名下,要不你可能需要联系微信的服务人员

公众号里使用的是腾讯视频,所以可以做到,你自己的视频无法解决,稍微好一点的方案是添加x5-video-player-type="h5" x5-video-player-fullscreen="false"
至于-webkit-playsinlineplaysinline是给iPhone用的,Android中不起作用

图片描述1、将视频先传到腾讯视频网上,类似于这种https://v.qq.com/x/page/z0355...
2、找到左下角有个分享按钮,鼠标放上去就有三个功能复制flash地址,复制html代码和复制通用代码,选复制通用代码;
3、将代码粘贴到html中就行了。iframe标签中视频宽高可以自己调整。

http://919.ofun.morewifi.com/...这个链接你用微信打开看看,我试了不是全屏的吧。

遇到类似的播放的问题,放弃了。

handsomewolf
  • 1
新手上路,请多包涵

还要看下视频文件,保证是立体声图片描述

还有一种方法,就是初始化的时候就把video标签设置为全屏,这样点击的时候相当于小屏播放了

倦了诗书
  • 1
新手上路,请多包涵
<div
    webkit-playsinline="true"
    x5-playsinline="true"
    playsinline="true">
  <video
   id="test_video"
   src="地址"
      controls="controls"
      webkit-playsinline="true"
      x5-playsinline="true"
      playsinline="true"
      autoplay>
  </video>
 </div>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏