2012-07-10 5 views
5

Я создаю мобильный сайт, где у меня есть видео, которое я хотел бы играть, когда кто-то нажимает на ссылку:html5 тег видео, чтобы играть на весь экран с Android

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

<script type="text/javascript"> 
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); 
    } 

} 
</script> 

С iPhone, это работает Отлично, я нажимаю на видео, и он идет в полноэкранном режиме. Android работает, но для этого требуется щелкнуть видео для воспроизведения, а затем щелкнуть по экрану. Можно ли попасть в полноэкранный режим, как iPhone, только когда вы нажмете игру?

+0

Что он делает на андроиде? – Grinn

+0

После того, как вы нажмете кнопку воспроизведения, он останется размером с плеер, который я укажу с параметрами высоты/ширины (которые мне нужны, чтобы вы могли вернуться к одному и тому же видео). Вы можете щелкнуть еще раз, чтобы перейти в полноэкранный режим с элементов управления, но я надеюсь только сразу перейти на полный экран, как iPhone. – Tom

+0

Модель безопасности браузера не позволит вам перейти в полноэкранный режим на события «играть» или «играть». Вы должны использовать «клик». Однако не все события кликов приводят к воспроизведению видео. Итак, в обработчике кликов вы хотите проверить для video_tag.paused === false и вызвать video_tag.webkitRequestFullScreen() –

ответ

0

Я отказался от этого. Я пришел к выводу, что тег html5 на устройствах Android ударяет куски. Он работает на некоторых устройствах, но не на других. И нет общих критериев, таких как 3.x или 4.x, это просто кажется случайным. Надеюсь, что это станет лучше когда-нибудь скоро, потому что поддержка флэш-памяти больше не существует.

Странно придерживаться простого href, кажется, наиболее последовательным. Вы теряете некоторые элементы управления, но лучше, чем тег видео ... по крайней мере до сих пор.

+0

Этот пост поддерживает ваш вывод: http://stackoverflow.com/questions/15768837/playing-html5-video-on-fullscreen-in-android-webview – Nilzor

1

Вышлите из списка mediaelement.js?

+0

Я проверил его, и он не работает даже на Android Kitkat 4.4 –

0

Попробуйте что-то вдоль линий:

document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false); 

Либо это, либо, возможно, что-то вдоль линий:

document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false); 

webkitEnterFullscreen является полноэкранным методом VIDEO элемента, который в настоящее время работает над прошивкой , Я не уверен в поддержке на устройствах Android.

mozRequestFullScreen и webkitRequestFullScreen - это реализация Mozilla и API FullScreen от Google, который используется для активации полноэкранного режима практически на любом элементе DOM.

Надеется, что дает вам по крайней мере, отправную точку для работы с ...

+0

спасибо. Это похоже на то, с чего начать. Я быстро попытался с тем, что вы опубликовали, но это не сработало, похоже, у меня есть какое-то исследование. – Tom

0

Большинство поставщиков требуют, чтобы взаимодействие пользователя проходило в полноэкранном режиме, поэтому ответ natalee не работает. Для Andriod, вы можете вызвать webkitEnterFullScreen() внутри обработчика щелчка вашего якоря, поскольку это действительное взаимодействие с пользователем:

myvideo[0].webkitEnterFullScreen(); 
    myvideo[0].play(); 

или

$('#myfileplayer')[0].webkitEnterFullScreen(); 
    $('#myfileplayer')[0].play(); 

Обратите внимание, как я зачистки оболочки JQuery с [0]. Это не работает.

4

Это должно работать, с простым 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(); 
} 

Вы должны вызвать воспроизведение() до полноэкранной инструкции, в противном случае в браузере Android будет просто пойти на весь экран, но она не начнет играть. Протестировано с последней версией Android-браузера, Chrome, Safari.

Смежные вопросы