精华内容
参与话题
问答
  • 目录:安卓和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");
                
            })


    展开全文
  • 【2019-03-14更新】修复答题后关闭弹窗 【2019-11-11更新】学习习惯:计时观看25分钟 智慧树自动关闭弹窗,自动跳转下...var video = $(".catalogue_ul1 li[id*=video-] .catalogue_title"); var i = 1; var v = ...

    【2019-03-14更新】修复答题后关闭弹窗

    【2019-11-11更新】学习习惯:计时观看25分钟

    智慧树自动关闭弹窗,自动跳转下一节,代码如下:

    无学习习惯版本(无时间限制)

    var ti = $("body");
    var video = $(".catalogue_ul1 li[id*=video-] .catalogue_title");
    var i = 1;
    var v = 1;
    video.css("color", "blue");
    console.log("已选取" + video.length + "个小节,并已用蓝色标明,请检查是否有遗漏,如有遗漏,概不负责");
    setTimeout(function () {
        $('.speedTab15').click();
        $('.volumeIcon').click();
        console.log("已进行静音和1.5倍加速");
    }, 3000);
    ti.on("DOMNodeInserted", function (e) {
        if (e.target.textContent == "关闭") {
            console.log("检测到第" + i + "个弹题窗口");
            window.setTimeout(function () {
                // document.getElementById("tmDialog_iframe").contentWindow.document.getElementsByClassName("answerOption")[0].getElementsByTagName("input")[0].click();
                $('#tmDialog_iframe')[0].contentWindow.$('.answerOption input[type="radio"]')[0].click();
                setTimeout(function () {
                    $(".popbtn_cancel").click();
                    console.log("已关闭");
                }, 1000);
            }, 2000);
            i++;
        } else if (e.target.textContent == "本节视频,累计观看时间『100%』") {
            console.log("检测到视频观看完成,准备跳到下一节");
            $('.next_lesson_bg').find('a').trigger('click');
            console.log("已跳转");
            setTimeout(function () {
                $('.volumeIcon').click();
                $('.speedTab15').click();
                console.log("已进行静音和1.5倍加速");
            }, 6000);
            v++;
            console.log("目前播放了" + v + "个视频");
        }
    });

    学习习惯版本(每次计时25分钟)

    var ti = $("body");
    var video = $(".catalogue_ul1 li[id*=video-] .catalogue_title");
    var i = 1;
    var v = 1;
    var startTime = new Date().getTime(); //开始时间
    var endTime = startTime + 60*25*1000; //结束时间 25分钟
    video.css("color", "blue");
    console.log("已选取" + video.length + "个小节,并已用蓝色标明,请检查是否有遗漏,如有遗漏,概不负责");
    setTimeout(function () {
        $('.speedTab15').click();
        $('.volumeIcon').click();
        console.log("已进行静音和1.5倍加速");
    }, 3000);
    ti.on("DOMNodeInserted", function (e) {
        var now = new Date().getTime();
        if(now-endTime >= 0){
            ti.off("DOMNodeInserted");
            if(window.confirm("已观看25分钟,是否返回首页?")){
                window.location.href = "https://onlineh5.zhihuishu.com/onlineWeb.html#/studentIndex";
            }
        }
    
        if (e.target.textContent == "关闭") {
            console.log("检测到第" + i + "个弹题窗口");
            window.setTimeout(function () {
                // document.getElementById("tmDialog_iframe").contentWindow.document.getElementsByClassName("answerOption")[0].getElementsByTagName("input")[0].click();
                $('#tmDialog_iframe')[0].contentWindow.$('.answerOption input[type="radio"]')[0].click();
                setTimeout(function () {
                    $(".popbtn_cancel").click();
                    console.log("已关闭");
                }, 1000);
            }, 2000);
            i++;
        } else if (e.target.textContent == "本节视频,累计观看时间『100%』") {
            console.log("检测到视频观看完成,准备跳到下一节");
            $('.next_lesson_bg').find('a').trigger('click');
            console.log("已跳转");
            setTimeout(function () {
                $('.volumeIcon').click();
                $('.speedTab15').click();
                console.log("已进行静音和1.5倍加速");
            }, 6000);
            v++;
            console.log("目前播放了" + v + "个视频");
        }
    });

    具体使用方法如下:

    进入网页后按F12出现以上界面,点击Console(控制台),然后把代码复制到下面输入框,回车。

    视频字体颜色变为蓝色表示成功了。

    展开全文
  • 当我们使用video标签的时候,有时候因为更多的需要,我们要自己自定义控制栏,而进入和退出全屏也是其中的一部分 不同的浏览器有不同的实现方法 // Webkit element.webkitRequestFullScreen();//...

    已迁移到个博 Eighteen blog

    当我们使用video标签的时候,有时候因为更多的需要,我们要自己自定义控制栏,而进入和退出全屏也是其中的一部分

    该功能也同样适用于其他全屏需求。


    • 不同的浏览器有不同的实现方法
    // Webkit
    element.webkitRequestFullScreen();//进入全屏
    document.webkitCancelFullScreen();//退出全屏
    
    // Firefox
    element.mozRequestFullScreen();
    document.mozCancelFullScreen();
     
    // W3C 
    element.requestFullscreen();
    document.exitFullscreen();
     
    
    • 一般兼容性写法,我们先使用w3c标准的方法,如果不可以在兼容不同浏览器。
    //进入全屏
    function FullScreen() {
        var ele = document.documentElement;
        if (ele.requestFullscreen) {
            ele.requestFullscreen();
        } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen();
        } else if (ele.webkitRequestFullScreen) {
            ele.webkitRequestFullScreen();
        }
    }
    //退出全屏
    function exitFullscreen() {
        var de = document;
        if (de.exitFullscreen) {
            de.exitFullscreen();
        } else if (de.mozCancelFullScreen) {
            de.mozCancelFullScreen();
        } else if (de.webkitCancelFullScreen) {
            de.webkitCancelFullScreen();
        }
    }
    
    • 接下来是用例
    $(ele).on('click',function(){
        FullScreen();
       // exitFullscreen();
    });
    
    • 当页面是iframe引入的时候,这时候全屏功能会直接报错,原因是因为iframe默认不同意其嵌入的内容可以直接开启全屏,需要我们手动配置一下。很简单。
     <iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"><iframe/>
    
    展开全文
  • Android webview全屏播放HTML video

    千次下载 热门讨论 2013-10-02 14:15:51
    http://blog.csdn.net/zrzlj/article/details/8050633的样例代码,解压以后,用eclipse导入工程,将例子视频放在sdcard下面即可
  • Android h5全屏播放video

    千次阅读 2017-10-25 10:51:01
    这个其实不难,只需在video标签加个webkit-playsinline属性即可,这个属性基本上在基于webkit内核的移动端都是没问题的,此全屏非彼全屏,它是在浏览器视窗内的全屏,并不是占居整个手机的全屏,当然我们做web端需要...

    H5全屏播放,在iOS系统上基本没有什么问题,但是在android系统,却又各种各样的问题。

    H5自身对全屏的支持

    这个其实不难,只需在video标签加个webkit-playsinline属性即可,这个属性基本上在基于webkit内核的移动端都是没问题的,此全屏非彼全屏,它是在浏览器视窗内的全屏,并不是占居整个手机的全屏,当然我们做web端需要的就是在document的body内的视窗范围的全屏。

    <video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>

    在ios下,视频被嵌入后,媒体的元数据加载完成后,会以全屏的形式显示出来,或者加个poster,可以看到画面。但在android下,多数机子是不显示视频画面的,要不就是显示一个黑色的还不是全屏的播放控件,即使及加个poster封面也不济于是。因为poster在android兼容的并不好,不如在视频上层加个div铺张图片,这个比较好的处理方式应该是:视频上加一层div做封面,由于android不允许视频上层有东西,所以首先将视频设为的width:1px,当播放后,上层的封面remove掉,同时width:100%或者你想要的宽。

    Android支持全屏播放

    public class WebVideoActivity extends Activity {
      
        private WebView webView;
    
        /** 视频全屏参数 */
        protected static final FrameLayout.LayoutParams COVER_SCREEN_PARAMS = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        private View customView;
        private FrameLayout fullscreenContainer;
        private WebChromeClient.CustomViewCallback customViewCallback;
    
        @Override
        protected void onCreate(Bundle bundle) {
            super.onCreate(bundle);
            setContentView(R.layout.activity_xx);
            webView = (WebView) findViewById(R.id.xx);
            initWebView();
        }
    
        @Override
        protected void onStop() {
            super.onStop();
            webView.reload();
        }
    
        /** 展示网页界面 **/
      public void initWebView() {
            WebChromeClient wvcc = new WebChromeClient();
            WebSettings webSettings = webView.getSettings();
            webSettings.setJavaScriptEnabled(true);
            webSettings.setUseWideViewPort(true); // 关键点
            webSettings.setAllowFileAccess(true); // 允许访问文件
            webSettings.setSupportZoom(true); // 支持缩放
            webSettings.setLoadWithOverviewMode(true);
            webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 不加载缓存内容
    
            webView.setWebChromeClient(wvcc);
            WebViewClient wvc = new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    webView.loadUrl(url);
                    return true;
                }
            };
            webView.setWebViewClient(wvc);
    
            webView.setWebChromeClient(new WebChromeClient() {
    
                /*** 视频播放相关的方法 **/
    
                @Override
                public View getVideoLoadingProgressView() {
                    FrameLayout frameLayout = new FrameLayout(WebVideoActivity.this);
                    frameLayout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
                    return frameLayout;
                }
    
                @Override
                public void onShowCustomView(View view, CustomViewCallback callback) {
                    showCustomView(view, callback);
                }
    
                @Override
                public void onHideCustomView() {
                    hideCustomView();
                }
            });
    
            // 加载Web地址
            webView.loadUrl(webUrl);
        }
    
        /** 视频播放全屏 **/
        private void showCustomView(View view, CustomViewCallback callback) {
            // if a view already exists then immediately terminate the new one
            if (customView != null) {
                callback.onCustomViewHidden();
                return;
            }
    
            WebVideoActivity.this.getWindow().getDecorView();
    
            FrameLayout decor = (FrameLayout) getWindow().getDecorView();
            fullscreenContainer = new FullscreenHolder(WebVideoActivity.this);
            fullscreenContainer.addView(view, COVER_SCREEN_PARAMS);
            decor.addView(fullscreenContainer, COVER_SCREEN_PARAMS);
            customView = view;
            setStatusBarVisibility(false);
            customViewCallback = callback;
        }
    
        /** 隐藏视频全屏 */
        private void hideCustomView() {
            if (customView == null) {
                return;
            }
    
            setStatusBarVisibility(true);
            FrameLayout decor = (FrameLayout) getWindow().getDecorView();
            decor.removeView(fullscreenContainer);
            fullscreenContainer = null;
            customView = null;
            customViewCallback.onCustomViewHidden();
            webView.setVisibility(View.VISIBLE);
        }
    
        /** 全屏容器界面 */
        static class FullscreenHolder extends FrameLayout {
    
            public FullscreenHolder(Context ctx) {
                super(ctx);
                setBackgroundColor(ctx.getResources().getColor(android.R.color.black));
            }
    
            @Override
            public boolean onTouchEvent(MotionEvent evt) {
                return true;
            }
        }
    
        private void setStatusBarVisibility(boolean visible) {
            int flag = visible ? 0 : WindowManager.LayoutParams.FLAG_FULLSCREEN;
            getWindow().setFlags(flag, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }
    
        @Override
        public boolean onKeyUp(int keyCode, KeyEvent event) {
            switch (keyCode) {
            case KeyEvent.KEYCODE_BACK:
                /** 回退键 事件处理 优先级:视频播放全屏-网页回退-关闭页面 */
                if (customView != null) {
                    hideCustomView();
                } else if (webView.canGoBack()) {
                    webView.goBack();
                } else {
                    finish();
                }
                return true;
            default:
                return super.onKeyUp(keyCode, event);
            }
        }
    }


    展开全文
  • H5 video全屏与取消全屏各浏览器兼容 requestFullscreen()全屏方法,exitFullscreen()退出全屏方法。兼容各个浏览器与css3兼容一样加个前缀即可。 // 全屏 // ele:全屏的对象 function requestFullscreen(ele...
  • H5 video 进入全屏和退出全屏

    千次阅读 2019-11-03 22:07:12
    见上图中,video禁用了原生控制条,加载自定义控制条,左侧为关闭,右侧为录像、全屏 以下主要针对全屏功能如何实现。 现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样: // Webkit (works in Safari...
  • h5 video全屏播放

    千次阅读 2019-05-14 16:06:45
    相关链接:H5 video的使用H5 video开发问题及相关知识点由于全屏播放在移动web上的兼容问题,尤其是在iOS上,让全屏本应该比较简单的操作,根据业务的需求,有时候会有些复杂。这里查看原生全屏相关API使用全屏的...
  • html5 video播放调研,全屏,伪全屏

    万次阅读 2016-04-09 16:37:10
    webduper code{web}:|:life{me}:|:tencent&xiaomi{work} 来源:http://materliu.github.io/all/web/mobile/2014/03/11/%E5%9F%BA%E4%BA%8Eweb%E7%BD%91%E9%A1%B5%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E5%B8
  • vue video全屏播放

    千次阅读 2019-01-04 20:55:00
    1、视频为长方形,页面初始化打开为横屏全屏播放视频。 2、微信不支持自动播放,故自动播放需求删除。 方法: 1、vue-video-player插件 因需求较简单,仅要求播放本地一个视频,故未选择使用插件。 2、video ...
  • video禁止全屏播放

    千次阅读 2018-11-09 17:24:46
    playsinline属性完美解决 -webkit-playsinline、webkit-playsinline、playsinline是禁止全屏播放的三个兼容性属性,其中,playsinline可完美解决ios端禁止全屏播放
  • 点击video视频全屏

    千次阅读 2019-08-02 11:03:05
    <div class="full">...video controls="controls" autoplay="autoplay" controlslist="nodownload" id="video"> <source src="images/ea13f7ae6bfc5901a120f5c2e70aaf2e.mp4" type="video/mp...
  • video禁止自动全屏

    千次阅读 2018-04-16 17:38:07
    video自动禁止全屏 在微信浏览器、苹果等其他浏览器,里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素 &nbsp; &nbsp;webkit-playsinline&nbsp;playsinline...
  • HTML5 video 进入全屏和退出全屏

    千次阅读 2019-03-28 18:19:10
    当我们使用video标签的时候,有时候因为更多的需要,我们要自己自定义控制栏,而进入和退出全屏也是其中的一部分 不同的浏览器有不同的实现方法 // Webkit element.webkitRequestFullScreen();//进入全屏 document...
  • video src="./mp4/v1.mp4" x5-video-player-type="h5" id="player" height="100%" width="100%" webkit-playsinline playsinline x5-playsinline x5-video-...
  • html5 video全屏播放/自动播放

    万次阅读 2018-09-07 09:43:50
    近期开始开发公司新版官网, 首页顶部(header)是一个全屏播放的小视频,开发过程中遇到一些麻烦,还好借助互联网解决了这个问题, 现简单总结如下: &amp;amp;amp;amp;lt;header class=&amp;amp;amp;quot;...
  • html video标签默认全屏

    2016-06-14 01:03:51
    1.打开网页时,就是全屏,2隐藏播放进步条 请问各位大神怎么实现呢??
  • Chromium为视频标签<video>全屏播放的过程分析

    万次阅读 热门讨论 2016-08-29 01:00:17
    在Chromium中,<video>标签有全屏和非全屏两种播放模式。在非全屏模式下,<video>标签播放的视频嵌入在网页中显示,也就是视频画面作为网页的一部分显示。在全屏模式下,我们是看不到网页其它内容的,因此<video>...

空空如也

1 2 3 4 5 ... 20
收藏数 122,708
精华内容 49,083
关键字:

全屏