에 따르면 :
http://developer.android.com/sdk/android-2.0-highlights.html
Android 2.0은 HTML5 동영상 요소를 지원해야합니다. Motorola Droid를 사용하여이 작업을 수행 할 수 없었고 HTML5 비디오 예제 페이지에서 비디오를 성공적으로 볼 수 없었습니다. 현재 QuickTime 또는 Flash에 대한 지원이 없기 때문에 웹 페이지에 mp4 비디오를 포함 할 수있는 유일한 방법입니다. 누구든지 이것으로 운이 좋았습니까?
답변:
나는 이것으로 몇 가지 실험을했고, 세 가지가 필요하다고 말할 수 있습니다.
이 페이지에서 데모를보십시오 : http://broken-links.com/tests/video/
이것은 AFAIK, 모든 비디오 지원 데스크톱 브라우저, iPhone 및 Android에서 작동합니다.
마크 업은 다음과 같습니다.
<video id="video" autobuffer height="240" width="360">
<source src="BigBuck.m4v">
<source src="BigBuck.webm" type="video/webm">
<source src="BigBuck.theora.ogv" type="video/ogg">
</video>
그리고 JS에 다음이 있습니다.
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
나는 이것을 Samsung Galaxy S에서 테스트했으며 잘 작동합니다.
Roman의 대답은 나에게 잘 맞았거나 적어도 내가 기대했던 것을 나에게주었습니다. 휴대폰의 기본 응용 프로그램에서 비디오를 여는 것은 iPhone이하는 것과 똑같습니다.
관점을 조정하고 비디오가 자체 응용 프로그램에서 전체 화면으로 재생되기를 기대하고이를 위해 코딩하는 것이 좋습니다. 동영상을 클릭하는 것만으로는 iPhone과 같은 방식으로 재생되기에 충분하지 않지만, 동영상을 시작하는 데 onclick 속성 만 필요하므로 세상의 끝이 아닙니다.
저의 조언 인 FWIW는 포스터 이미지를 사용하고 동영상이 재생 될 것임을 분명히하는 것입니다. 저는 현재 정확히 그렇게하는 프로젝트를 진행하고 있으며, 고객들은 그것에 만족하고 있습니다. 또한 그들은 웹 앱의 안드로이드 버전을 무료로 받고 있다는 것입니다. iPhone 웹 앱.
예시를 위해 작동하는 Android 동영상 태그가 아래에 있습니다. 멋지고 간단합니다.
<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
controls속성 을 사용하면 일시 중지를 누르면 onclick 이벤트가 무시되지만 (따라서 비디오가 실제로 일시 중지됨) 재생을 클릭해도 아무 일도 일어나지 않습니다. 동영상을 다시 시작하려면 동영상 (실제 재생 버튼이 아님)을 클릭해야합니다.
여기에 내 친구가 Nexus One에서 HTML로 동영상을 표시하는 문제를 해결 한 방법을 포함합니다.
비디오를 인라인으로 재생할 수 없었습니다. 사실 인터넷상의 많은 사람들이 Honeycomb 이후로 HTML에서 인라인 비디오 재생이 지원된다는 것을 명시 적으로 언급하고 있으며, 우리는 Froyo 및 Gingerbread와 싸우고있었습니다 ... 또한 작은 휴대폰의 경우 전체 화면 재생이 매우 자연 스럽다고 생각합니다. 그렇지 않으면 많이 보이지 않습니다. . 그래서 목표는 비디오를 전체 화면으로 여는 것이 었습니다. 그러나이 스레드에서 제안 된 솔루션은 우리에게 효과가 없었습니다. 요소를 클릭해도 아무것도 트리거되지 않았습니다. 또한 비디오 컨트롤이 표시되었지만 포스터가 표시되지 않아 사용자 경험이 더 이상했습니다. 그래서 그가 한 일은 다음과 같습니다.
자바 스크립트를 통해 호출 할 수 있도록 네이티브 코드를 HTML에 노출합니다.
JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");
코드 자체에는 비디오를 재생하기 위해 네이티브 액티비티를 호출하는 함수가 있습니다.
public class JavaScriptInterface {
private Activity activity;
public JavaScriptInterface(Activity activiy) {
this.activity = activiy;
}
public void startVideo(String videoAddress){
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setDataAndType(Uri.parse(videoAddress), "video/3gpp"); // The Mime type can actually be determined from the file
activity.startActivity(intent);
}
}
그런 다음 HTML 자체에서 그는 비디오 태그가 비디오를 재생하는 데 계속 실패했습니다. 결국 그는 onclick비디오 의 이벤트 를 덮어 쓰기로 결정 하여 실제 플레이를 수행하게했습니다. 이것은 포스터가 표시되지 않은 것을 제외하고는 거의 그에게 효과적이었습니다. 여기에 가장 이상한 부분이 있습니다. 그는 태그 ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"의 poster속성을 설정할 때마다 계속 수신했습니다 . 마침내 그는 매우 이상한 문제를 발견 했습니다. 태그에 source하위 태그를 유지 video했지만 사용한 적이 없다는 것이 밝혀졌습니다 . 이상하게도 이것이 문제를 일으켰습니다. 이제 video섹션에 대한 그의 정의를 참조하십시오 .
<video width="320" height="240" controls="controls" poster='poster.gif' onclick="playVideo('file:///sdcard/test.3gp');" >
Your browser does not support the video tag.
</video>
물론 페이지 헤드에 자바 스크립트 함수의 정의를 추가해야합니다.
<script>
function playVideo(video){
window.JSInterface.startVideo(video);
}
</script>
이것이 순전히 HTML 솔루션이 아니라는 것을 알고 있지만 Nexus One 유형의 휴대 전화에서 할 수있는 최선의 방법입니다. 이 솔루션에 대한 모든 크레딧은 Dimitar Zlatkov Dimitrov에게 전달됩니다.
수동으로 호출 video.play()하면 작동합니다.
<!DOCTYPE html>
<html>
<head>
<script>
function init() {
enableVideoClicks();
}
function enableVideoClicks() {
var videos = document.getElementsByTagName('video') || [];
for (var i = 0; i < videos.length; i++) {
// TODO: use attachEvent in IE
videos[i].addEventListener('click', function(videoNode) {
return function() {
videoNode.play();
};
}(videos[i]));
}
}
</script>
</head>
<body onload="init()">
<video src="sample.mp4" width="400" height="300" controls></video>
...
</body>
</html>
내 안드로이드 2.2 브라우저를 html5test.com 으로 가리키면 비디오 요소가 지원되지만 나열된 비디오 코덱 중 어느 것도 비디오 요소를 지원하는 것이 조금 무의미 해 보이지만 코덱은 없습니까 ??? 테스트 페이지에 문제가없는 한
그러나 오디오 요소와 동일한 종류의 상황을 발견했습니다. 요소는 지원되지만 오디오 형식은 없습니다. 여길 봐:
http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/
비디오를 제대로 인코딩 할 때까지 아무것도 효과가 없었습니다. 올바른 핸드 브레이크 설정을 위해이 가이드를 사용해보십시오 : http://forum.handbrake.fr/viewtopic.php?f=7&t=9694
다음과 같이 장치 용으로 특별히 비디오를 인코딩해야 할 수도 있습니다.
<video id="movie" width="320" height="240" autobuffer controls>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.mp4" type='video/mp4; codecs="some droid video codec, some droid audio codec"'>
</video>
여기에서 작업 한 인코딩 구성의 몇 가지 예가 있습니다.
작동해야하지만 해상도를 확인하세요 : Android 2.0 및 웹킷
Canvas는 상자에서 바로 작동하는 반면 Geolocation은 에뮬레이터에서 전혀 작동하지 않는 것 같습니다. 물론 작동하려면 모의 위치로 보내야하므로 실제 전화에서 어떻게 될지 모르겠습니다. 비디오 태그로도 같은 말을 할 수 있습니다. 실제로 비디오를 재생하지 않는 데 문제가 있지만 비디오가 에뮬레이터가 처리 할 수있는 것보다 더 높은 해상도라는 사실이라고 생각합니다. 누군가 Motorola Droid 또는 기타 차세대 Android 기기에서이 작업을 시도하면 더 많이 알게됩니다.
이것은 귀하의 질문에 정확히 대답하지 않을 수 있지만 3GP 또는 3GP2 파일 형식을 사용하고 있습니다. rtsp 프로토콜을 사용하는 것이 더 좋지만 Android 브라우저는 3GP 파일 형식도 인식합니다.
다음과 같이 사용할 수 있습니다.
self.location = URL_OF_YOUR_3GP_FILE
비디오 플레이어를 트리거합니다. 파일이 스트리밍되고 재생이 끝나면 브라우저로 처리가 반환됩니다.
나를 위해 이것은 안드로이드 장치에서 현재 비디오 태그 구현과 관련된 많은 문제를 해결합니다.
에 따르면 : https://stackoverflow.com/a/24403519/365229
이것은 일반 Javascript로 작동합니다.
var myVideo = document.getElementById('myVideoTag'); myVideo.play(); if (typeof(myVideo.webkitEnterFullscreen) != "undefined") { // This is for Android Stock. myVideo.webkitEnterFullscreen(); } else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") { // This is for Chrome. myVideo.webkitRequestFullscreen(); } else if (typeof(myVideo.mozRequestFullScreen) != "undefined") { myVideo.mozRequestFullScreen(); }전체 화면 안내 전에 play ()를 트리거해야합니다. 그렇지 않으면 Android 브라우저에서 전체 화면으로 이동하지만 재생을 시작하지 않습니다. 최신 버전의 Android 브라우저, Chrome, Safari로 테스트했습니다.
Android 2.3.3 및 4.4 브라우저에서 테스트했습니다.
많은 연구 끝에 지금까지 다양한 장치에서 형식 MP4보다 훨씬 덜 지원되는 간단한 결론에 도달했습니다 MOV. 그래서 MOV모든 브라우저에서 모든 Android 및 Apple 기기에서 지원하는 형식을 사용 하고 있습니다. 기기가 모바일 기기 또는 데스크톱 브라우저 인 날씨를 감지하고 SRC그에 따라 설정합니다 .
if (IsMobile()) {
$('#vid').attr('src', '/uploads/' + name + '.mov');
}
else {
$('#vid').attr('src', '/uploads/' + name + '.webm');
}
function IsMobile() {
var isMobile = false; //initiate as false
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) isMobile = true;
return isMobile;
}
이 .mp4형식을 사용하여 Android 기기에서 동영상을 재생 하려고했지만 잘되지 않았습니다. 그래서 약간의 시행 착오 끝에 .webm추가 javascript 또는 JQuery없이 비디오를 형식과 다음 코드 로 변환했습니다 .
<video id="video" class="video" muted loop autoplay>
<source src="../media/some_video.webm" type="video/webm">
Sorry, your browser doesn't support embedded videos.
</video>
오래된 Android 기기에서 작동했습니다 (최소한 2020 년 기준).
HTML5는 Galaxy S와 같은 Google (Android) 휴대 전화와 iPhone 모두에서 지원됩니다. 그러나 iPhone은 Google 휴대폰에서 지원하는 Flash를 지원하지 않습니다.