आईफोन पर इनलाइन एचटीएमएल 5 वीडियो

मैं आईफोन पर एक एचटीएमएल 5 वीडियो खेलना चाहता हूं लेकिन जब भी मैं कोशिश करता हूं, तो वीडियो '.play()' कहलाता है जब आईफोन स्वचालित रूप से पूर्णस्क्रीन में पॉप आउट हो जाता है। मैं कैसे iPhone इस तरह इसके बारे में यूआई बदले बिना वीडियो इनलाइन खेलते हैं:आईफोन पर इनलाइन एचटीएमएल 5 वीडियो

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>

स्रोत

2015-06-15 Chris Johnson

कृपया अपना कार्य-प्रगति कार्यान्वयन पोस्ट करें। – JAL

हमें कुछ कोड –

मुख्य धागे पर एक टिप्पणी के बजाय इसे उत्तर के रूप में लिखने के लिए क्षमा करें, लेकिन मुझे स्पष्ट रूप से टिप्पणी करने के लिए पर्याप्त प्रतिष्ठा अंक नहीं हैं!

वैसे भी, मैं ओपी के समान ही काम करने की भी तलाश कर रहा हूं।

मैंने देखा कि एक विशेष लाइब्रेरी है, krpano, krpano videoplayer plugin के साथ जो वीडियो को आईफोन इनलाइन पर चलाने की अनुमति देता है! कार्रवाई में इस के कुछ डेमो यहां पाए जा सकते हैं: http://krpano.com/video/

जबकि मैं इन पागल पैनोरामा वीडियो पर एक साधारण 2 डी वीडियो उदाहरण पसंद करूंगा, यह वेब को खराब करते समय मैंने पाया है।

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>

लेकिन वह अकेले पर्याप्त नहीं लगता है: मैं क्या बता सकते हैं, वे एक सामान्य दस्तावेज़ से जुड़ी नहीं तत्व का उपयोग करते हैं वीडियो खेला जाता है, यह अभी भी पूर्णस्क्रीन चला जाता है।

वीडियो को पूर्णस्क्रीन जाने से रोकने के लिए वे कैसे प्रबंधित करते हैं?

संपादित करें: दोनों उदाहरण यह है कि वे दोनों की तरह दिखाई देता वीडियो प्रस्तुत करने के लिए कैनवास तत्व का लाभ कर रहे थे, तो मैं आगे चला गया और वीडियो कैनवास तत्व के माध्यम से प्रतिपादन दिखावा एक डेमो ऊपर मार पड़ी है को देखने के बाद। जबकि डेमो बहुत अच्छा काम करता है, यह आईफोन पर पहुंचने में विफल रहता है (यहां तक कि वीडियो तत्व को पूरी तरह से डीओएम से हटा दिया जाता है!) - वीडियो अभी भी पूर्ण स्क्रीन पर कूदता है। मैं सोच रहा हूँ अगले कदम एक WebGL कैनवास के लिए ये एक ही सिद्धांतों को लागू करने होगा (कि krpano उदाहरण क्या कर रहे हैं है), लेकिन इस बीच में हो सकता है इस डेमो दूसरों में कुछ विचार चिंगारी होगा ...

http://jakesiemer.com/projects/video/index.htm

स्रोत

2015-06-15 23:54:51 Jake

क्रिस जे की आवश्यकता है, मुझे यह भी लगता है कि आपका पहला उदाहरण काम करता है क्योंकि उस विशेष लाइब्रेरी वास्तव में जावास्क्रिप्ट के माध्यम से रीयल-टाइम में वीडियो स्ट्रीम को डिस्को करता है (ब्राउज़र/ओएस के अंतर्निर्मित डिकोडर का लाभ उठाने के बजाय)। यह [ब्रॉडवे.जेएस] (https://github.com/mbebenita/broadway) जैसा है, जो संयोग से आईफोन पर भी काम करता है, हालांकि, फ़्रेमेट वास्तव में निराशाजनक लगता है, और ऑडियो विशेष रूप से सिंक नहीं लगता है कुंआ। यहां उदाहरण: http://mbebenita.github.io/Broadway/foxDemo.html – Jake

मैं इस पर एक समाधान पर काम कर रहा हूं जब तक ऐप्पल "वेबकिट-नाटकोंलाइन" वास्तव में इनलाइन खेलने की अनुमति देता है। 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

ऐप्पल को बदलने के लिए असली ड्राइवर डिफ़ॉल्ट रूप से सक्षम आईओएस उपकरणों के लिए वेबजीएल की हालिया रिलीज होगी। असल में वीडियो बनावट का उपयोग करने वाले लोगों का पूरा समूह बनने जा रहे हैं। तकनीकी रूप से अभी, यह नहीं किया जा सकता है।

स्रोत

2015-07-20 21:05:01 newshorts

यदि आप ऑडियो तत्व और वीडियो तत्व बनाते हैं, तो आप ऑडियो इंटरैक्शन के माध्यम से ऑडियो चला सकते हैं और फिर वीडियो को खोज सकते हैं, इसे कैनवास में प्रस्तुत कर सकते हैं। यह कुछ जल्दी है कि मैं के साथ (iPhone आईओएस पर परीक्षण 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(); 
}

CodePen

Test Page

स्रोत

2016-03-02 21:44:59 Kyle

क्या यह स्रोत फ़ाइल को दो बार लोड नहीं करेगा? – yckart

@yckart, नहीं। वीडियो को पहले लोड पर कैश किया गया है। मैंने सोचा कि यह दो बार भी लोड होगा। मैंने नेटवर्क इंस्पेक्टर को यह देखने के लिए जांच की कि यह वास्तव में केवल एक बार वीडियो लोड करता है और दूसरा अनुरोध कैश से परोसा जाता है। – Kyle

यह काम करता है! यदि आप अधिक व्यापक समाधान पसंद करते हैं, तो [iphone-inline-video] (https://github.com/bfred-it/iphone-inline-video) आज़माएं (प्रकटीकरण: मैंने इसे लिखा है)। यह मूल रूप से एक ही अवधारणा है लेकिन यह घटनाओं का भी ख्याल रखता है और इसे निर्बाध बनाता है। –

IOS10/सफारी 10 पर आप अब playsinline संपत्ति HTML5 वीडियो तत्व को जोड़ सकते हैं आया , और यह सिर्फ इनलाइन खेलेंगे।

स्रोत

2016-09-12 14:18:32 Eek

और आईओएस 8-9 पर आप [iphone-inline-video] (https://github.com/bfred-it/iphone-inline-video/) का उपयोग पॉलीफिल के रूप में कर सकते हैं –

आईफोन पर इनलाइन एचटीएमएल 5 वीडियो

उत्तर

संबंधित मुद्दे