iphone上的內聯html5視頻
[英]inline html5 video on iphone
問題描述
我想在iPhone上播放HTML5視頻，但每當我嘗試時，當視頻'.play（）'被調用時，iPhone會自動全屏彈出。 如何在不改變iPhone的UI的情況下內聯播放視頻：
http://www.easy-bits.com/iphone-inline-video-autostart
http://www.takeyourdose.com/en （點擊“開始360體驗”）
編輯：這是我的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>iPhone Test</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="document.getElementById('vid').play()">Start</button>
<video id="vid">
<source src="/videos/tutorial.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
4 個解決方案
解決方案1
8 2015-07-20 21:05:01
我正在努力解決這個問題，直到Apple允許“webkit-playsinline”真正實現內聯播放。
我在這里開了一個庫： https ： //github.com/newshorts/InlineVideo
這是非常粗糙的，但基本要點是你通過視頻“尋找”而不是直接播放。 所以不要打電話：
video.play()
您改為使用請求動畫幀或setInterval設置循環，然后設置：
video.currentTime = __FRAME_RATE__
所以整個事情可能在你的html中看起來像：
<video controls width="300">
<source src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>
<canvas></canvas>
<button>Play</button>
和你的js（確保包括jquery）
var video = $('video')[0];
var canvas = $('canvas')[0];
var ctx = canvas.getContext('2d');
var lastTime = Date.now();
var animationFrame;
var framesPerSecond = 25;
function loop() {
var time = Date.now();
var elapsed = (time - lastTime) / 1000;
// render
if(elapsed >= ((1000/framesPerSecond)/1000)) {
video.currentTime = video.currentTime + elapsed;
$(canvas).width(video.videoWidth);
$(canvas).height(video.videoHeight);
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
lastTime = time;
}
// if we are at the end of the video stop
var currentTime = (Math.round(parseFloat(video.currentTime)*10000)/10000);
var duration = (Math.round(parseFloat(video.duration)*10000)/10000);
if(currentTime >= duration) {
console.log('currentTime: ' + currentTime + ' duration: ' + video.duration);
return;
}
animationFrame = requestAnimationFrame(loop);
}
$('button').on('click', function() {
video.load();
loop();
});
http://codepen.io/newshorts/pen/yNxNKR
Apple更改此功能的真正驅動因素是最近發布的默認啟用ios設備的webGL。 基本上會有很多人希望使用視頻紋理。 從技術上講，這是不可能完成的。
解決方案2
6 2016-09-12 14:18:32
在IOS10 / Safari 10上，您現在可以將playsinline屬性添加到HTML5 Video元素，它將只是內聯播放。
解決方案3
3 2016-03-02 21:44:59
如果您創建音頻元素和視頻元素，則可以通過用戶交互播放音頻，然后搜索視頻，將其渲染到畫布。 這是我提出的快速（在iPhone iOS 9上測試）
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var audio = document.createElement('audio');
var video = document.createElement('video');
function onFrame(){
ctx.drawImage(video,0,0,426,240);
video.currentTime = audio.currentTime;
requestAnimationFrame(onFrame);
}
function playVideo(){
var i = 0;
function ready(){
i++;
if(i == 2){
audio.play();
onFrame();
}
}
video.addEventListener('canplaythrough',ready);
audio.addEventListener('canplaythrough',ready);
audio.src = video.src = "http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4";
audio.load();
video.load();
}
解決方案4
1 2015-06-15 23:54:51
抱歉寫這個作為答案而不是對主線程的評論，但我顯然沒有足夠的聲譽點來評論！
無論如何，我也希望做與OP完全相同的事情。
我注意到有一個特殊的庫， krpano ，加上krpano videoplayer插件 ，允許在iPhone INLINE上播放視頻！ 這里有一些演示可以在這里找到： http ： //krpano.com/video/
雖然我更喜歡這些瘋狂的全景視頻的簡單2D視頻示例，但這是我在網上搜索時最接近的。 據我所知，他們使用未附加到文檔的普通元素：
var v = document.querySelector('video');
// remove from document
v.parentNode.removeChild(v);
// touch anywhere to play
document.ontouchstart = function () {
v.play();
}
視頻元素在刪除之前：
<video playsinline webkit-playsinline preload="auto" crossorigin="anonymous" src="http://www.mediactiv.com/video/Milano.mp4" loop style="transform: translateZ(0px);"></video>
但僅此一點似乎還不夠：播放視頻時，它仍然全屏顯示。
他們如何設法防止視頻全屏？
編輯：在看了兩個例子后，看起來他們都利用畫布元素來渲染視頻，所以我繼續前進並制作了一個演示通過畫布元素顯示視頻渲染的演示。 雖然該演示效果很好，但它無法在iPhone上傳送（即使視頻元素已從DOM中完全刪除！） - 視頻仍會跳轉到全屏。 我認為下一步是將這些相同的原則應用於WebGL畫布（這就是krpano示例正在做的事情），但與此同時，這個演示可能會引發其他人的想法......
iPhone與iPad /瀏覽器上的HTML5內聯視頻
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.