1.前端页面

             <!-- 弹出视频展示内容 --><div class="row_xiaoguo"></div>

2.css内容

/* 点击前属性  */.buttonClick{width: 100%;height: 100%;/*  background-color: #f5f5f5; */background-color: #ab3838;position: absolute;z-index: 1000;opacity: 0.1;}/* 点击关闭后属性  */
.buttonPause{width: 100%;height: 100%;/*  background-color: #f5f5f5; */background-color: #ab3838;position: absolute;z-index: 1000;opacity: 0.1;}

页面展示情况

后台传递值为视频的数组值，前台通过js接受填充到页面中

$(".col_details_right").click(function(){//显示视频层$(".fanhui_position").css("display","block");//显示遮罩层$(".zhezhao").css("display","block");var  workId =  $(this).attr("id_details");$.ajax({async:false,   type:"post",url:"${pageContext.request.contextPath }/qd/selectYewu",data:{workId:workId},dataType:"json",success:function(data){$(".col-details-position").html(data.work.workContent);//清除col-video-position内容$(".row_xiaoguo").html("");$.each(data.workVideos,function(i,workVideo){   var tLi=null;/* 第一个视频autoplay='autoplay'自动播放 */if(workVideo!='') {var tLi="<div class='col-xs-4 row_video_title'>效果案例"+(i+1)+"</div>"+"<div class='col-xs-11 col-video-position'><div class='buttonClick' zsrc='"+(i+1)+"'></div><video  disablePictureInPicture controlsList='nodownload' webkit-playsinline='flase' "+" playsinline='false' id='videou"+(i+1)+"'  width='100%' height='45%'  controls='controls'  "+"src="+workVideo+" type='audio/mp4' ></video></div> "  ;                        }else{var tLi="<div class='col-xs-4 row_video_title'>效果案例"+(i+1)+"</div>"+"<div class='col-xs-11 col-video-position'>"+"<img src='/pwxaccount/statics/img/yewu/video_no.png'   class='img-responsive' /></div> "   ;}$(".row_xiaoguo").append(tLi); });},error:function(){layer.msg('出现异常');}});})

//控制视频关闭$(document).on("click",".buttonPause",function(){//增加该class属性$(this).addClass('buttonClick');   // 移除该class属性$(this).removeClass('buttonPause');                  var videoNumber=$(this).attr("zsrc");// 把选择做精简版var videoNumberId="#videou"+videoNumber;//alert("videoNumberId======="+videoNumberId);var video = document.querySelector(videoNumberId);video.pause();                         })$(document).on("click",".buttonClick",function(){//增加该class属性//    $("video").prev("div").addClass('buttonClick'); $(".buttonPause").addClass('buttonClick'); //移除该class属性//  $("video").prev("div").removeClass('buttonPause');          $(".buttonPause").removeClass('buttonPause');//增加该class属性$(this).addClass('buttonPause'); //移除该class属性$(this).removeClass('buttonClick');               //获取是想让第几个视频播放var videoNumber=$(this).attr("zsrc");//   alert(videoNumber);// 把选择做精简版var videoNumberId="#videou"+videoNumber;//alert("videoNumberId======="+videoNumberId);var video = document.querySelector(videoNumberId);video.play();for(i=0;i<8;i++){var j = i+1;if(j==videoNumber){continue;}var videoNumberId="#videou"+j;//   alert("videoNumberIdJ======="+videoNumberId);var video = document.querySelector(videoNumberId);video.pause();}})

解决手机网页视频同时播放问题相关推荐

解决手机app视频无法播放问题
笔者家中新换了宽带,路由器也换了新的,发现部分app如京东.微博中的视频无法播放,用手机4G网络可以正常播放,在单位连接wifi可以正常播放.将问题定位在路由器上,经过排查,发现新买的路由器中多出了一 ...
爱奇艺html5不能播放器,爱奇艺视频播放失败怎么办网页视频不能播放的解决方法教程[多图]...
有网友反映在爱奇艺网站看视频时总是提示播放失败,不能正常播放视频,这该怎么办呢?本文将给大家介绍解决爱奇艺视频播放失败的方法. 解决方法: 1.电脑缓存过多解决方法:点击"设置" ...
Win7系统网页视频无法播放怎么办
Win7系统网页视频无法播放怎么办?最近有Win7系统用户反映,网页视频无法播放,用户反复试了几次,结果都一样,这让用户非常苦恼.那么Win7系统网页视频无法播放怎么办呢?下面就和小编一起来看看详细的 ...
win10html5无法播放,Win10网页视频无法播放提示启用adobe flash player
Win10网页视频无法播放提示"点击即可启用adobe flash player"咋办? 最近有Win10用户反馈,在使用Edge或谷歌浏览器播放视频的时候,页面总会提示" ...
js手机键盘遮挡_完美解决手机网页中输入框被输入法遮挡的问题
之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填. 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定解决办法 ...
百度网盘网页视频加速播放
百度网盘网页视频加速播放按F12进入开发者模式然后在consolesole输入这个: videojs.getPlayers("video-player").html5playe ...
解决ppt中视频不能播放的问题
解决ppt中视频不能播放的问题参考文章: (1)解决ppt中视频不能播放的问题 (2)https://www.cnblogs.com/sophia-hxw/p/6210216.html 备忘一下.
解决Coursera的视频不能播放问题
解决Coursera的视频不能播放问题一.打开本地hosts文件二.通过解析工具查询地址三.组合文本总结一.打开本地hosts文件在C盘搜索etc文件夹,在文件夹中找到hosts文件,用记 ...
手机网页视频背景自动播放记录
#摘记:踩了两天的坑,阅文章无数,再次特别感谢本篇博主 https://segmentfault.com/a/1190000020674521 感谢jsmpeg插件提供者运行场景: 网站需要视频作为 ...

解决手机网页视频同时播放问题

1.前端页面

2.css内容

页面展示情况

后台传递值为视频的数组值，前台通过js接受填充到页面中

解决手机网页视频同时播放问题相关推荐

最新文章

热门文章