html5 thẻ video để chơi toàn màn hình với Android

Question

tôi là tạo ra một trang web di động, nơi tôi có một đoạn video tôi muốn chơi khi ai đó nhấp vào một liên kết:

<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> 

Với iPhone, tác phẩm này tuyệt vời, tôi bấm vào video và nó đi toàn màn hình. Android cũng hoạt động nhưng yêu cầu bạn phải nhấp vào video để phát rồi nhấp vào toàn màn hình. Có thể truy cập toàn màn hình như iPhone ngay khi bạn nhấn play?

Answer 1

Tôi đã từ bỏ việc này. Kết luận của tôi là thẻ video html5 trên thiết bị Android thổi khối. Nó hoạt động trong một số thiết bị nhưng không hoạt động trên các thiết bị khác. Và không có tiêu chí phổ biến như 3.x hoặc 4.x, nó chỉ có vẻ là ngẫu nhiên. Tôi hy vọng điều này sẽ tốt hơn đôi khi sớm đặc biệt là kể từ khi hỗ trợ flash không còn tồn tại.

Kỳ lạ gắn bó với một đơn giản href có vẻ là nhất quán nhất. Bạn mất một số điều khiển nhưng cách tốt hơn so với thẻ video ... ít nhất là cho đến nay.

Answer 2

Bạn đã xem mediaelement.js chưa?

Answer 3

Hãy thử một cái gì đó dọc theo dòng:

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

Hoặc là có hoặc có lẽ một cái gì đó dọc theo dòng:

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

webkitEnterFullscreen là phương pháp toàn màn hình của một nguyên tố VIDEO rằng hiện đang làm việc trên iOS . Tôi không chắc về hỗ trợ trên thiết bị Android.

mozRequestFullScreen và webkitRequestFullScreen là các triển khai của Mozilla và API FullScreen của Google được sử dụng để kích hoạt chế độ toàn màn hình trên thực tế mọi phần tử DOM.

Hy vọng rằng cung cấp cho bạn ít nhất một điểm bắt đầu để làm việc từ ...

Answer 4

Hầu hết các nhà cung cấp yêu cầu tương tác của người dùng để chuyển sang chế độ toàn màn hình, đó là lý do tại sao câu trả lời của natalee không hoạt động. Cho Andriod, bạn có thể gọi webkitEnterFullScreen() bên trong bộ xử lý nhấp chuột của neo của bạn vì nó là một sự tương tác người dùng hợp lệ:

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

hoặc

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

Lưu ý làm thế nào tôi đang tước wrapper jQuery với [0]. Nó không hoạt động khác.

Answer 5

này nên làm việc, với đồng bằng 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(); 
} 

Bạn phải kích hoạt play() trước khi hướng dẫn toàn màn hình, nếu không trong trình duyệt Android nó sẽ chỉ đi toàn màn hình nhưng nó sẽ không chơi bắt đầu. Đã thử nghiệm với phiên bản mới nhất của Trình duyệt Android, Chrome, Safari.