精华内容
下载资源
问答
  • 微信video兼容

    2019-04-08 11:49:13
    微信video标签的原生支持一般般,ios还好,安卓出现了默认全屏播放等一些兼容问题(上下有间距啦什么的),通过查询资料,资料还请大家自己去查询把,我就不解释了,直接demo把,亲测 基本满足需求,用户也没...

    微信端video标签的原生支持一般般,ios还好,安卓出现了默认全屏播放等一些兼容问题(上下有间距啦什么的),通过查询资料,资料还请大家自己去查询把,我就不解释了,直接给demo把,亲测 基本满足需求,用户也没意见。

     

       <video id="myVideo" class="video" src="视频连接地址"
                           controls preload="none" poster="" muted
                           playsinline="true"
                           x5-playsinline
                           playsinline="true"
                           webkit-playsinline=""
                           x-webkit-airplay="true">
                    </video>

     

    这几个属性  我来来回回 根据查到的资料 摸鱼般测试, 最后才测出来 只有这样才行。 

    根据别人的意见,有的可能是因为微信改版或者什么原因 已经出问题了。

    以上如果不行,我也没办法了 ,只能挨着试这几个属性值了,反正蛋疼的很。。。。。

    展开全文
  • 微信浏览器 video

    2019-10-09 16:25:11
    原文参考:...<video src="http://······.mp4" muted loop autoplay="autoplay" preload="auto" controls x5-video-player-fullscreen="true" webkit-playsinline="true" x-webki...

    在这里插入图片描述

    <video src="http://······.mp4" muted loop autoplay="autoplay" preload="auto" controls x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-playsinline />
    
    展开全文
  • 目录:安卓和ios微信video小窗口播放(太水,可以直接跳过)noscript标签video移动端上面不得不说的辛酸腾讯关于video的说明文档:https://x5.tencent.com/tbs/guide/video.html一个video html标签包含以下几个常见的...

    目录:

    1. 安卓和ios微信video小窗口播放(太水,可以直接跳过)
    2. noscript标签
    3. video移动端上面不得不说的辛酸

    腾讯关于video的说明文档:https://x5.tencent.com/tbs/guide/video.html

    一个video html标签包含以下几个常见的属性:

    • x-webkit-airplay="true"      //支持Airplay的设备(如:音箱、Apple TV)播放
    • webkit-playsinline=""    //支持嵌入html标签里面播放,ios支持比较好,安卓l浏览器无效(测试搜狗浏览器)没看到有效果,谷歌浏览器可以
    • playsinline="true"
    • x5-video-player-type="h5" 
    • x5-video-orientation="portrait"
    • x5-video-player-fullscreen="false"


    X5开头的是腾讯X5内核提供的,只对微信,QQ内置浏览器,QQ浏览器有效,使用这些属性会开启一个叫

    “H5同层播放器”的东西,就是开启一个全屏,

    如果不添加腾讯提供的X5开头的属性默认使用腾讯提供内核提供的播放器,可以嵌套在div里面,但是层级有点问题。


    其中x5-video-player-fullscreen="false",并没有达到我期待的效果,或者有效果不明显,仍旧是全屏

    其他的是webkit内核提供的属性

    https://webkit.org/blog/6784/new-video-policies-for-ios/


    但是我现在继续解决的就是微信上面小窗口播放的问题,其他浏览器已经不抱希望

    百度(千篇一律的无效答案),最后谷歌到了一位小哥的博客终于解决(实测微信6.65有效,但是不适用我这种swiper缓动整个屏幕的场景)

    https://blog.csdn.net/qq_16494241/article/details/72780908

    关于"h5同层播放器":

    video{ width:100%; vertical-align:middle; object-fit:contain; object-position:left top;}

    可以设置视频在全屏后的位置,“全屏”可以相对整儿body文档



    1.我尝试使用了腾讯X5提供的属性:

    x5-video-player-type='h5' x5-video-player-fullscreen='true'

    2.后给video设置display:none;

    3.再通过cavnas绘制的,在最新版的微信上面可以。

    但是QQ内置浏览器和QQ浏览器canvas上面上像电视机雪花屏幕一样

    如果不使用腾讯提供的标签是无效的,之前就一直被埋在这个坑里走不出来。

    提现下不要自作聪明使用    visibility: hidden;替代display:none;证明无效


    小米自带的浏览器直接是调用小米播放器.....................无效放弃....


    实际上,在安卓微信上面播放video仍旧会进入全屏模式,但是是整个页面进入全屏模式,video可以在其中播放,第一次播放视频(进去全屏模式),仍旧对页面有强烈的抖动或闪动的不友好效果。


    贴下代码:

    判断平台:

    //平台判断
    var userAgent = navigator.userAgent.toLowerCase()
    var isAndroid = /android/i.test(userAgent)
    var isWX = /micromessenger/i.test(userAgent)

    核心代码:

    var FixAndroidVideo = function(videoSrc, canvasSrc, videoW, videoH) {
        var TestVideo = document.getElementById(videoSrc);
        //获取canvas画布
    
        var TestCanvas = document.getElementById(canvasSrc);
        //设置画布
        var TestCanvas2D = TestCanvas.getContext('2d');
        //设置setinterval定时器
        var TestVideoTimer = null;
        //监听播放
        TestVideo.addEventListener('play', function() {
            TestVideoTimer = setInterval(function() {
                TestCanvas2D.drawImage(TestVideo, 0, 0, videoW, videoH);
            }, 20);
        }, false);
        //监听暂停
        TestVideo.addEventListener('pause', function() {
            clearInterval(TestVideoTimer);
        }, false);
    };

    html:

    <video id="tenvideo_video_player_0" width="177" height="127" loop="loop"  x-webkit-airplay="allow" webkit-playsinline=""
                            playsinline="true" x5-video-player-type="h5" x5-video-orientation="portrait" x5-video-player-fullscreen="false"
                  
                            preload="none" poster="//i.gtimg.cn/qqlive/images/20150608/black.png" src="#"></video>


    终于解决了IOS和安卓上面的video小屏幕播放。



    noscript


    这是我遇到一个很有趣的问题。

    我之前一直用谷歌浏览器看小说。

    因为有很多广告(盗版小说),我就把谷歌浏览器的JavaScript给屏蔽掉了。

    结果今天我写项目的时候死活不行。

    最后才想起javascript被我屏蔽掉了。

    如果用户也这样怎么办,岂不是要坑我。

    恩,noscript标签挺好用的,就写一个大大的提示给他。


    “如果不支持或者关闭了script,别想访问我的网站!!!”


    666+


    2018/01/01更新

    第二天后微信video雪花播放器了,囧,无语

    最后解决方法,放弃腾讯提供的X5-属性,直接样式缩放video,也放弃canvas绘制,直接提供一个蒙城诱导用户click(video只能video触发播放)

    如果用户没有吃诱饵,第一次不会触发video自动播放,只有等待用户看到视频那个位置有video提供的大箭头提示才会主动去点击,之后就可以由我们控制了



    3.video

    关于html5 video事件的说明:这里强调的是“脚本”只要你的js运行了,就会执行对应状态的回调实际上video是否有执行该状态是无法确认的。

    例如安卓微信监听playing,绑定时间click的时候播放video,事实上video并没有播放,但是playing执行了。

    代码如下:

      document.addEventListener("WeixinJSBridgeReady", function() {
                 Media.play("tenvideo_video_player_0");
            }, false);
     $("#tenvideo_video_player_0").one("playing", function() {
                if ($("#tenvideo_video_player_0")[0]) {
                        alert("我特么的跑起来了,但是video没有播放")
                    
                }
            })




    video,audio时间在不同平台上面的特性

    以下代码注意,“脚本播放”,“脚本”,“android微信”,“andorid浏览器”之间的区分

    1.IOS:脚本触发播放后就可以通过脚本再次触发播放,安卓微信上面不行,例如:

    document.addEventListener("WeixinJSBridgeReady", function() {
                Media.play("tenvideo_video_player_0");
                Media.play("car_audio");
            }, false);

    之后可以通过js直接播放ID为tenvideo_video_player_0的video,而安卓微信不行

    同时android 微信6.6.5不再支持WeixinJSBridgeReady触发video的播放,ios可以

    android微信上面以上代码还会有个奇特的现象,如果你监听了“timeupdate”你发现它会执行,但是你的视频实际上却没有 播放。


    2.IOS微信可以同时脚本播放多个音频视屏,但是android微信不行,android其他浏览器可以。例如:

    $(document).one("click touchstart", function() {
                
                    if ($("#tenvideo_video_player_0")[0]) {
                        $("#tenvideo_video_player_0")[0].volume = 0;
                        Media.play("tenvideo_video_player_0");
                    }
                    Media.play("car_audio");
                
            })
    这个代码之后可以手动让播放ID为tenvideo_video_player_0的video,但是android 微信不行


    3.IOS浏览器可以通过touchstart触发audio和video的播放,但是安卓浏览器不行,例如

    $(document).one("click touchstart", function() {
                
                    if ($("#tenvideo_video_player_0")[0]) {
                        $("#tenvideo_video_player_0")[0].volume = 0;
                        Media.play("tenvideo_video_player_0");
                    }
                    Media.play("car_audio");
                
            })


    展开全文
  • 微信h5 video 问题

    2018-08-23 14:54:34
    遇到的问题:在微信使用video的时候,会自动全屏(已解决)  点进去不能自动播放(未解决) &lt;video class="video-source" width="100%"  height="240px" /*如果有封面,...

    遇到的问题:在微信使用video的时候,会自动全屏(已解决)

                       点进去不能自动播放(未解决)

    <video class="video-source"
         width="100%"
       height="240px"  /*如果有封面,请设置高度*/
         controls  /*这个属性规定浏览器为该视频提供播放控件*/  
         style="object-fit:fill"  /*加这个style会让 Android / web 的视频在微信里的视频全屏,如果是在手机上预览,
         会让视频的封面同视频一样大小*/
         x5-playsinline='true' // 安卓微信浏览器支持小窗内播放
         webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放*/      ​​​x-webkit-airplay="true" /*这个属性还不知道作用*/ 
         playsinline="true" /*IOS微信浏览器支持小窗内播放*/ 
         x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/ 
         x5-video-orientation="h5" /*播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏*/ 
         x5-video-player-fullscreen="true" /*全屏设置,设置为 true 是防止横屏*/ 
         preload="auto" /*这个属性规定页面加载完成后载入视频*/ 
    </video>

     

    自动播放,下面这个方法我试了,但是没用

    document.addEventListener("WeixinJSBridgeReady",function(){ 
         document.getElementById("videoID").play();
    },false);

     

    video标签在移动端,autoplay属性是没有效果的。

    展开全文
  • 先了解一下w3c video标签 大致主要的也就这么点,更详细的请去自己W3C去阅览; 先说为什么会写这篇文章,因为公司最近有个需求,就是微信页面上要有APP端录制的视频。 说白了就是微信网页要有视频,要播放视频 ...
  • 前提介绍: iOS中微信的浏览器内核应该是和Safari浏览器同样的内核 ...iOS上给video标签增加playsinline和webkit-playsinline(兼容新版旧版),对于在Safari中可以内联播放的,那么在微信中也是内联播放的 Andro
  • 微信H5video视频问题

    千次阅读 2017-02-07 17:27:17
    微信里视频有时候不想要全屏播放、不想在视频播放完之后有推送其他视频出现,不想让视频一直处于最高层,想在视频上添加按钮标签等,可以在video标签上添加几个属性,代码如下(兼容ios和安卓):
  • 安卓微信video退出视频全屏方法 在做h5项目的时候,安卓video全屏模式退出方案: <script> var video = document.getElementById(‘video‘); //监听视频播放结束的时候 video.addEventListener(...
  • 解决ios微信video全屏

    千次阅读 2017-08-02 10:32:48
    微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素。 还有个问题,在Android的微信里面,就算加上了...解决办法:给video加上object-fit: fill;的style属性。
  • 微信H5 Video 开发小结

    2020-08-03 10:44:26
    最近开发公众号内H5网页过程中,为了达到“炫”的效果,有些特效采用了video展示,但是微信内的video展示着实太费神了,这里总结一些遇到的坑和解决的办法。 video的属性 <video id="video" src="video....
  • 微信浏览器video解决全屏播放问题

    千次阅读 热门讨论 2018-07-17 16:41:38
    ios的微信浏览器为chrome内核 在video标签添加属性 webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"   安卓的为x5内核 在video标签添加属性 x5-...
  • 解决微信浏览器video全屏的问题 在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素。 <videoid="videoID"webkit-playsinline="true"x-webkit-airplay=...
  • ios微信浏览器video不能自动播放 <video id="video" controls="" preload="none" mediagroup="myVideoGroup"> <source src="video/test.mp4" type="video/mp4"> </video> <!-- 必须加在...
  • 解决微信浏览器video全屏的问题及黑边问题
  • 微信网页video播放视频不全屏的解决方法: 提示:百度上的答案都是千篇一律无效的 话不多说,直接上代码。 已把controls属性取消。需要的自己加上。 html: &amp;amp;lt;p class=&amp;quot;play-...
  • 微信浏览器video播放视频踩坑

    千次阅读 2019-09-24 01:02:19
    video属性介绍 iOS的属性 playsinline On iPhone, video playsinline elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins. video elements ...
  • https://x5.tencent.com/tbs/guide/video.html 给video标签添加属性 x5-video-player-type="h5" 转载于:https://www.cnblogs.com/zhaoyihao/p/9322610.html
  • 微信video小窗播放(ios+android)

    千次阅读 2019-03-15 21:05:25
    给video标签加上3个属性: x5-playsinline="true" playsinline="true" webkit-playsinline x5-playsinline="true" 是对微信中安卓有效,另一个对ios有效 微信中视频插件:video.js 在线地址: 这个插件配合上面的...
  • 这是一个老生常谈的问题,也是每个做微信直播前端心中的痛点,做过微信直播的同学都知道不管video的z-index设置为多小,或者其他元素的z-index比video大多少,video始终在最顶层。关于这一点官方出的回答也是相当的...
  • ios/android微信浏览器video自动播放 相信很多开发为此苦恼,经历种种磨难不负有心人,ios、android都可实现自动播放。 首先须知JS动态添加的video标签,JS执行play,是可以直接全屏播放的,但是这种上禁止全屏等...
  • https://github.com/cczw2010/weixin-video
  • 开发微信公众号是遇到一个很无解的问题 首先在服务器端上传了一个mp4格式的视频 然后再pc或手机其他浏览器中都可以播放该视频;唯独在微信浏览器解析不到 解决方法: 可能是微信浏览器找不到该视频在服务器的...
  • 关于微信浏览器video标签获取第一帧和总时长的问题 最近项目中需要上传视频并限制播放时长。还要展示第一帧画面 技术实现。通过Input file 获取上传的视频资源,读取之后转成blob,放到video标签上。然后获取第一帧...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,106
精华内容 10,042
关键字:

微信给video