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();}})

總結

以上是生活随笔為你收集整理的解决手机网页视频同时播放问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。