2012-07-10 2 views
3

모바일 사이트를 만들고 있는데 Android 기기에서 동영상을 재생하는 데 문제가 있습니다. 나는 비디오를 재생할 수 있지만 그것이 엉뚱한 찾으십시오. 때로는 브라우저가 충돌을 일으키고 다른 때에는 컨트롤이 응답하지 않습니다. 내 테스트의 대부분은 Galaxy S3와 Nexus에 있습니다.android devices에서 html5로 동영상 재생

코드는 동영상을 재생할 때 클릭 할 수있는 링크입니다. 내가 여기 디버깅 다른 모르겠어요

function DoNav(theUrl) 
{ 

// only add the player if it doesn't yet exist 
if($('#myfileplayer').length == 0) { 
    var mydiv = $("#player"); 
     var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>"); 
      mydiv.append(myvideo); 
} else { 
    $('#myfileplayer').attr("src",theUrl); 
} 

var video = document.getElementById('myfileplayer'); 
video.addEventListener('click',function(){ 
    video.play(); 
},false); 

} 

:

<div id="player"></div> 
<a href="#" onclick="DoNav('<?php echo $url; ?>');" title="Click to play video"> <?php echo $result_videos[$i]["camera_name"]; ?> </a> 

자바 스크립트/JQuery와 믹스 (매우 최적이 아닌, 어쩌면이 문제입니다). 어떤 아이디어?

+0

나는 정적 인 비디오 태그가있는 정적 페이지로 시작하여 괜찮은지 확인합니다. – akonsu

+0

@akonsu 그걸 시도해 봤는데 괜찮아. – Tom

+0

멋지다면, 비디오에 "canplay"이벤트 리스너를 추가하면 비디오가 준비되었을 때만 클릭 할 수 있도록 클릭 리스너를 연결합니다. – akonsu

답변

0

@akonsu 덕분에 그는 왜 내가 클릭 이벤트 리스너가 필요할 지에 대해서 언급 했습니까? 좋은 지적, 나는하지 않는다. 나는 그것을 제거하고 이상한 행동이 모두 사라졌습니다.

function DoNav(theUrl) 
{ 

    // only add the player if it doesn't yet exist 
    if($('#myfileplayer').length == 0) { 
    var mydiv = $("#player"); 
    var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>"); 
     mydiv.append(myvideo); 
    } else { 
    $('#myfileplayer').attr("src",theUrl); 
    } 

}