video.js兼容微信浏览器，（播放.m3u8视频源）解决微信浏览器黑屏问题
 
一、问题描述：
 
 
 
在h5做根据视频源直播功能时，在浏览器能打开视频，但是在部分安卓机和苹果机在微信浏览器打开会出现黑屏的状况（默认打开页面播放视频）
 
 
二、本人发生的原因：打开页面默认加载视频，由于关闭了控件，导致部分手机视频无法加载；需要手动加个触发按钮
 
三、解决
 （1）、引入相关js和css：videojs-contrib-hls.js 、video.js、 video-js.css（自行下载）
 （2）、上代码
 
		<video 
				id="example-video" 
				class="video-js vjs-big-play-centered" 
				autoplay="autoplay" 
				controlsList="nofullscreen nodownload"
				disablePictureInPicture oncontextmenu="return false" 
				style="width: 100%;height: 15rem;"
				x-webkit-airplay="allow"
			>
			<source :src="liveSource" type="application/vnd.apple.mpegurl">
		</video>
 
		var myPlayer = videojs('example-video', {
		     bigPlayButton: true, //是否显示播放按钮
		     autoplay:true,//自动播放
		     controls: true,//播放控件
		}, function () {
		this.play()
		})
 

 

1、在Cocos2d-js开发过程中 通常会遇到很多问题。本次解决在安卓手机上的微信内置浏览器黑屏问题。
 
2、微信的内置浏览器和其它专业的浏览器不同。微信内置浏览器用x5内核。在一些方面比其它专业的浏览器比较落后，所以经常会遇到
 
卡顿、跳帧、黑屏问题。
 
3、对于黑屏问题一般是前后端交互的时候发生的问题。比如前端是POST请求 那么后端收到也应该是POST请求。但是微信内置浏览器不一样。
 
它强制性 的转成了 OPTION类型。所以后端收到的就是错误的数据。而且抓包的时候也会看到前端发出的数据是 null  。所以就需要正确的在前后端进行
 
改进。
 

 
 
4、以下是主要代码。
 
function  Http(){
     var _succCallback = function(){};//回调函数
     var _errCallback = function(){}; //出现错误的回调函数
 }
 
 function createXMLHttpRequest() {
     var xmlHttp;
     if (window.XMLHttpRequest) {
         xmlHttp = new XMLHttpRequest();
         if (xmlHttp.overrideMimeType)
             xmlHttp.overrideMimeType('text/xml');
     } else if (window.ActiveXObject) {
         try {
             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
             try {
                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
             } catch (e) {
             }
         }
     }
     return xmlHttp;
 }
 
 Http.prototype.getJSON = function(url,data,callBack,errorCallBack ){
     if(typeof (callBack) == "function"){
         this._succCallback = callBack;
     }else{
         this._succCallback = function(){}
     }
     if(typeof (errorCallBack) == "function"){
         this._errorCallBack = errorCallBack;
     }
     var xmlHttp = createXMLHttpRequest();
     var datato2 = cc.loader._str2Uint8Array(data); //加密 [201,34,...]
     xmlHttp.open("POST", url+"?header=qqqq", true );//encodeURI(String(datato2)), true);
     xmlHttp.send(datato2); 
     Utils.showWaitting();
     
     var self = this;
     var callBack2 = callBack;
     var currentScene = cc.director.getRunningScene();
     xmlHttp.onreadystatechange = function(){ // ajax回调
         if (xmlHttp.status == 0) {
             Utils.showLowNet();
             self._succCallback("fail");
             return;
         }
         if(xmlHttp.readyState == 4){
             if( xmlHttp.status == 200 ){
                 var strData = xmlHttp.response;
                 if(strData.length>0){      //当内容为空时会有"[]"
                     self._succCallback(strData);
                 }else{
                     cc.log("链接不畅，请检查网络");
                     return;
                 }
             }else{
                 //网络错误处理
                 if(self._errorCallBack) {
                     cc.log("连接失败");
                 }
             }
         }else{
             //网络错误处理
             if(self._errorCallBack) {
                 cc.log("连接失败");
             }
         }
     }
 }
 
 

 

在使用Google浏览器的时候，会遇到各种各样的问题，今天早上上班的时候，遇到了一个很怪的问题，那就是谷歌浏览器黑屏，在万般无奈之下，把谷歌浏览器卸载了，也发现没啥用，最后迫不得已，求助度娘，在度娘上找到的答案，就是进入设置，修改硬件加速，可是浏览器黑屏了，怎么进入呢？到此，此方法无效，继续找，找到一个看似有用的答案，就是在谷歌浏览器启动的时候加参数，右键属性---
 
 
在打开的窗口中，选择快捷方式，在目标属性输入框中，在已有信息后边加上 --disable-gpu  --disable-software-rasterize参数，点击应用，点击确定。
 
 
最后再次重新打开谷歌浏览器，发现还是原样---黑屏， 说明此方法不生效（在我这种情景上不生效，不代表在其他情况下也不生效），果断重新查找方法，但是找了半天，终于在一个犄角旮旯找到了一个特别的答案。
 
那就是修改显卡设置。我的机器是NVIDIA独显，根据查询到的信息，需要修改显卡设置。给对应的应用程序修改特别的图形处理器。将应用程序的图形处理器选成集成图形处理器。如图：
 
 
然后点击下方应用按钮，使配置生效。
 
然后再次重新打开浏览器，发现黑屏已经不见。

1. 打开chrome设置

 
2. 最下面-显示高级设置

 
3. 再拉到最下面-使用硬件加速模式（把勾去掉）
 
 
 
启用硬件加速是好的，可以加快程序的运行速度和流畅度。
 

1、启用硬件加速后，程序可以使用电脑上的一些硬件，比如独立显卡，这样可以节省系统的运行内存提高程序的图形显示能力。
2、注意在系统内存充足的情况下，比如电脑的配置比较好的情况下，开始硬件加速效果不是特别的明显，在电脑内存不足情况下且机器配备独立显卡的情况下使用硬件加速功能效果比较明显。