H5 video安卓默认点击不能全屏播放解决办法

调用方法:

autoFullScrenn(obj)

还有一篇:

使用MediaElement.js构建个性的HTML5音频和视频播放器

var fullscreen = function(elem) {
    var prefix = ‘webkit‘;
      if ( elem[prefix + ‘EnterFullScreen‘] ) {
        return prefix + ‘EnterFullScreen‘;
      } else if( elem[prefix + ‘RequestFullScreen‘] ) {
        return prefix + ‘RequestFullScreen‘;
      };
    return false;
};

function autoFullScrenn(v){
    var ua   = navigator.userAgent.toLowerCase();
    var Android = String(ua.match(/android/i)) == "android";
    // if(!Android) return;//非android系统不使用;
    var video  = v,doc = document;
    var fullscreenvideo = fullscreen(doc.createElement("video"));
    if(!fullscreen) {
        alert("不支持全屏模式");
        return;
    }
    video.addEventListener("webkitfullscreenchange",function(e){
        if(!doc.webkitIsFullScreen){//退出全屏暂停视频
            this.pause();
            // this.pause();
        };
    }, false);
    video.addEventListener("click", function(){
        this.play();
        video[fullscreenvideo]();
    }, false);

    video.addEventListener(‘ended‘,function(){
        doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
    },false);

};

// autoFullScrenn(video_obj)

  

时间: 2024-10-10 16:10:17

H5 video安卓默认点击不能全屏播放解决办法的相关文章

关于页面全屏化解决办法

效果: 点击按钮全屏 js : fullscreen(ele) { let element = document.getElementById(ele); let requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; console.log(requestMethod);

Theme.AppCompat无全屏主题解决办法

V7包中的Theme.AppCompat主题系列中并没有全屏样式,这个是为什么,只有作者知道-- 解决办法: 自定义主题 <style name="Theme.AppCompat.Light.NoActionBar.FullScreen" parent="@style/Theme.AppCompat.Light"> <item name="windowNoTitle">true</item> <item

Chromium为视频标签&lt;video&gt;全屏播放的过程分析

在Chromium中,<video>标签有全屏和非全屏两种播放模式.在非全屏模式下,<video>标签播放的视频嵌入在网页中显示,也就是视频画面作为网页的一部分显示.在全屏模式下,我们是看不到网页其它内容的,因此<video>标签播放的视频可以在一个独立的全屏窗口中显示.这两种截然不同的播放模式,导致Chromium使用不同的方式渲染视频画面.本文接下来就详细分析<video>标签全屏播放的过程. 从前面Chromium为视频标签<video>渲

h5 video 点击自动全屏

加上如下属性 https://blog.csdn.net/weixin_40974504/article/details/79639478 可阻止自动全屏播放,感谢 https://blog.csdn.net/weixin_40974504/article/details/79639478 原文地址:https://www.cnblogs.com/zonglonglong/p/10015623.html

H5.video在微信中禁止全屏播放视频和直播流

这段时间在做一个直播项目,有直播需求,也有视频播放需求,要求能在微信中以半屏的方式播放,另外半屏可以做一些操作,还有些组件需要悬浮在视频上方.网上各种扒拉,各种实验,以求在微信中实现不全屏就能播放和自动播放,最终还是用了单纯的video标签.自动播放到目前还是没找到完美的解决方法. 非全屏播放视频 <video loop autoPlay src={url} controls={true} poster={pic} playsinline webkit-playsinline x5-video-

html-----vedio标签(HTML5新标签VIDEO在IOS上默认全屏播放)

今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然后几经波折终于找到其解决的方法了,在video标签下的source中加入这个-webkit-playsinline=true完美解决全屏问题. 例如: <video width="100%" loop="loop" autoplay controls="

HTML5新标签video在iOS上默认全屏播放

今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然后几经波折终于找到其解决的方法了,在video标签下的source中加入这个-webkit-playsinline=true完美解决全屏问题. 例如: <video width="100%" loop="loop" autoplay> <source

android webview 全屏播放H5 (Playing HTML5 video on fullscreen in android webview)

最近关于webview的问题遇到的比较多,关于如何在webview中全屏播放视频,网上有很多种解决方法,这里也有一种方法,试了几种后发现还是这种比较好用. 这里就拿出来与大家分享,出自http://stackoverflow.com/questions/15768837/playing-html5-video-on-fullscreen-in-android-webview#userconsent# 代码里面已经有很好的注释了,我就不画蛇添足了. VideoEnabledWebChromeCli

防止html5的video标签在iphone中自动全屏

问题: 当在iphone中打开html5页面中的video视频时,会默认调取系统播放器,全屏播放视频资源. 解决方式: 1. 首先在html5页面的video标签中添加webkit-playsinline=true; <video id="player" webkit-playsinline></video> 接着在UIWebView中设置allowsInlineMediaPlayback属性: webview.allowInlinesMediaPlayback