本文共 1960 字，大约阅读时间需要 6 分钟。

转载请注明出处

Author：ruanjianjiagou@163.com

背景

第一篇详解主要是讲解Android客户端需要开发的内容，本篇主要是讲前端在开发中需要特别主要的一个点，全屏播放，ios不用做处理可以直接全屏，而Android客户端需要js特别执行下。

Android WebView Video完全详解（第一篇）-Android开发人员

Android需要做的工作~ 传送门

需要注意的点

以上就是特别处理的点，大概是需要点击的时候主动调一下全屏的方法，一定是只有android才加载这个js

再来一段更直接的直接给你判断好

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)

举个栗子

  
       
       
No Poster Attribute
  
   
    
      
   
  
Poster Attribute
  
   
    
      
   
  
No Controls
  
   
    
        
          
           
     
            
           
   
  

3个video 分别展示三种对视频全屏按钮的样式

demo会有更直接的，不想动手的就直接去下载吧。

戳我下载~

转载地址：https://blog.csdn.net/u014513456/article/details/54381527 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！