2013-06-13 1 views
1

내가 bxSlider에서 슬라이드에 비디오를 배치에서 재생되지, 그것은 데스크톱 브라우저에서 정상적으로 재생하지만, iOS 기기에서 테스트 할 때 - 아이폰과 아이 패드를 , 비디오가 재생되지 않습니다.HTML5 비디오를 (아마도 fitvids.js에 의한) 아이폰 OS에 bxSlider 슬라이드 쇼

나는 현재의 HTML 코드를 포함 시켰습니다. 모든 기기에서 재생해야하는 슬라이드 쇼 아래에 <video> 요소를 복제했습니다.

bxSlider guide on video에 따르면 jquery.fitvids.js 파일이 포함되어 있습니다. 슬라이드를 제거하면 슬라이드의 비디오가 재생되지만 슬라이드 쇼는 올바르게 작동하지 않습니다 (복제 된 슬라이드가 보이고 컨트롤이 누락 됨).

주목해야 할 또 다른 예상치 못한 일이 bxSlider를 초기화하는 스크립트가 라이브러리 아래에 머리에 배치 할 때, bxSlider 전혀 시작하지 않는다는 것입니다.

jsFiddle

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Vid test</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="jquery.fitvids.js"></script> 
    <script src="jquery.bxslider.js"></script> 
</head> 
<body> 

<ul class="bxslider"> 
    <li> 
     <video width="100%" height="300" id="video1" controls preload="auto"> 
      <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2013/06/Becel_15s.mp4" type="video/mp4"> 
      <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.webm" type="video/webm"> 
      <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.ogv" type="video/ogg"> 
     </video> 
    </li> 
</ul> 

<video width="100%" height="300" id="video1" controls preload="auto"> 
    <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2013/06/Becel_15s.mp4" type="video/mp4"> 
    <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.webm" type="video/webm"> 
    <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.ogv" type="video/ogg"> 
</video> 

<script> 
    $(".bxslider").bxSlider({ 
     video: true, 
     useCSS: false 
    }); 
</script> 


</body> 
</html> 
+0

이 같은 문제가 :( – turkeyhundt

답변

0

은 '리'태그에 두 번째 비디오 태그를 싸서 그 'UL'태그 내부에 걸릴.

<ul class="bxslider"> 
    <li> 
     <video width="100%" height="300" id="video1" controls preload="auto"> 
      <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2013/06/Becel_15s.mp4" type="video/mp4"> 
      <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.webm" type="video/webm"> 
      <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.ogv" type="video/ogg"> 
     </video> 
    </li> 
<li> 
<video width="100%" height="300" id="video1" controls preload="auto"> 
    <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2013/06/Becel_15s.mp4" type="video/mp4"> 
    <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.webm" type="video/webm"> 
    <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.ogv" type="video/ogg"> 
</video> 
</li> 
</ul>