1.前端頁面

<!-- 彈出視頻展示內(nèi)容 --><div class="row_xiaoguo"></div>

2.css內(nèi)容

/* 點(diǎn)擊前屬性 */.buttonClick{width: 100%;height: 100%;/* background-color: #f5f5f5; */background-color: #ab3838;position: absolute;z-index: 1000;opacity: 0.1;}/* 點(diǎn)擊關(guān)閉后屬性 */ .buttonPause{width: 100%;height: 100%;/* background-color: #f5f5f5; */background-color: #ab3838;position: absolute;z-index: 1000;opacity: 0.1;}

頁面展示情況

后臺傳遞值為視頻的數(shù)組值，前臺通過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內(nèi)容$(".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('出現(xiàn)異常');}});}) //控制視頻關(guān)閉$(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();}})

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。