2012-10-21 2 views
3

궁극적 인 목표는 iDevices에서 내 웹 사이트를 보는 것입니다. 클릭하면 전체 화면으로 비디오가 재생되고 비디오가 끝나면 다른 웹 페이지로 리디렉션됩니다. 내가 가지고있는 코드를 폐기한다고해도, 내 목표를 달성하는 모든 솔루션에 개방적이다.iDevice onclick이 현재 코드로 비디오를 재생하지 않습니다.

여기에 아직로서 최선 시도 : 나는 this stackoverflow post

을 다음했다 My current testing site

이것은 내가 내 노트북 ​​[편집 크롬에서 작동하지만 FF 16.0에 결과에 만족합니다. 1 한숨을 더 이상 모르겠다),하지만 현재 내 iDevices (ipad1 & iphone4)에서 비디오를 재생할 이미지를 클릭 할 수 없습니다. 조사를 통해이 목표를 달성하기 위해 수 시간을 시도했습니다. 시행 착오가 발생했습니다. & 오류가 발생하지 않습니다. 브라우저가 전체 화면 API를 지원하지 않는 경우

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width; initial-scale=1.0" /> 
<meta name="description" content="" /> 
<title>test</title> 

<script type="text/javascript"> 

    function videoEnd() { 
     var video = document.getElementById("video"); 
     video.webkitExitFullScreen(); 
     document.location = "http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/jk5%20all/build.html"; 
    } 

    function playVideo() { 
     var video = document.getElementById("video"); 
     video.addEventListener('ended', videoEnd, true); 
     video.webkitEnterFullScreen(); 
     video.load(); 
     video.play(); 
    } 

</script> 
</head> 
<body> 
<video id="video" poster="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/image.png" onclick="playVideo();"> 
    <source src="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/video.mp4" type="video/mp4" /> 
</video> 
</body> 
</html> 

답변

1

하는 (http://caniuse.com/#feat=fullscreen) 그 오류를 던질 수 있습니다 여기에

내가 함께 일하고 코드입니다 playVideo 함수에서.

function videoEnd() { 
    var video = document.getElementById("video"); 
    if(video.webkitExitFullScreen) video.webkitExitFullScreen(); 
    document.location = "http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/jk5%20all/build.html"; 
} 

function playVideo() { 
    var video = document.getElementById("video"); 
    if(video.webkitEnterFullScreen) video.webkitEnterFullScreen(); 
    video.load(); 
    video.play(); 
} 

<video id="video" poster="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/image.png" onclick="playVideo();" onended="videoEnd();"> 
<source src="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/video.mp4" type="video/mp4" /> 

이 수정을 시도
관련 문제