0

我创建了以下javascript代码以将视频作为弹出窗口加载到我的网页中。视频在浏览器上加载和播放都很好，但由于某些问题，它们无法在移动设备上播放。

附上相同的代码。

 var bodyLightBox = document.getElementById("bodyLightBox");
 var modalBoxWapper = document.getElementById("modalBoxWapper");
 var modalBox = document.getElementById("modalBox");
 var pageBody = document.getElementById("body");

 var videoWrapper = document.getElementById("videoWrapper");

 var currCont ="";
 var boxHeight = document.body.clientHeight;

 var videoCont ="";


 function openModalBox(conId, divWidth){    
     contDiv = document.getElementById(conId);
     currCont = contDiv;

     bodyLightBox.style.display="block";
     bodyLightBox.style.height = boxHeight+"px";

     modalBoxWapper.style.display="block";
     modalBox.style.width = divWidth;
     currCont.style.display="block";

     pageBody.style.overflow="hidden";
 }

 function closeModalBox(id){    
     bodyLightBox.style.display="none";
     modalBoxWapper.style.display="none";
     currCont.style.display="none";
     pageBody.style.overflow="auto";     
 } 

 function openVideoModalBox(divID, videoTitle, videoURLID, videoDivWidth){

     bodyLightBox.style.display="block";
     bodyLightBox.style.height = boxHeight+"px";

     modalBoxWapper.style.display="block";
     modalBox.style.width = videoDivWidth;  

     createVideoWrapper(divID, videoTitle, videoURLID);
     //alert(divID);
     videoCont = document.getElementById(divID);
     videoCont.style.display="block";

     pageBody.style.overflow="hidden";
 }

 function closeVideoModalBox(id){   
     bodyLightBox.style.display="none";
     modalBoxWapper.style.display="none";
     videoCont.style.display="none";     
     pageBody.style.overflow="auto";

     removeDiv(videoWrapper, id);
 }

function createVideoWrapper(divID, videoTitle, videoURLID){

     var div = document.createElement('div');
     videoWrapper.appendChild(div);
     div.setAttribute('id', divID);
     div.styly ='display: none;';

     var titleDiv = document.createElement('div');
     div.appendChild(titleDiv);
     titleDiv.setAttribute("className", 'topBar'); // className use for ie7
     titleDiv.setAttribute("class", 'topBar');  // this worked all
     titleDiv.innerHTML='<div class="modalBoxtitle" id="modalBoxtitle">'+videoTitle+'</div><div class="closeBtn" onclick="closeVideoModalBox('+divID+')">X</div><div style="clear: both;"><!--  --></div>';

     var videoCont = document.createElement('div');
     div.appendChild(videoCont);
     videoCont.setAttribute("className", 'video_contWapper'); // className use for ie7
     videoCont.setAttribute("class", 'video_contWapper');  // this worked all
     videoCont.innerHTML='<object type="application/x-shockwave-flash" height="480" width="640" data="http://www.youtube.com/v/'+videoURLID+'?autoplay=1&amp;hl=en_GB&amp;version=3&amp;rel=0"><param name="movie" value="http://www.youtube.com/v/'+videoURLID+'?autoplay=1&amp;hl=en_GB&amp;version=3&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed height="480" src="http://www.youtube.com/v/'+videoURLID+'?autoplay=1&amp;hl=en_GB&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" id="ytplayer01"></embed></object>';
    //videoCont.innerHTML='<iframe width="640" height="480" src="http://www.youtube.com/v/'+videoURLID+'?autoplay=1&amp;hl=en_GB&amp;version=3&amp;rel=0" frameborder="0" allowfullscreen><!--  --></iframe>';

     var emptyDiv = document.createElement('div');
     div.appendChild(emptyDiv);
     emptyDiv.style.clear="both";
     emptyDiv.innerHTML="<!--  -->";
 }

// remove video div
function removeDiv(parent, child){
        parent.removeChild(child);
    }

等待解决方案。

4

1 回答 1

0

您是否在此页面上嵌入了 Flash 播放器（移动设备不支持/不支持）？

如果您希望视频在移动设备浏览器上流畅播放，您最好使用<video>具有适当视频格式（例如 h264）的标签。

于 2013-11-13T10:44:26.913 回答