অনুসারে:
http://developer.android.com/sdk/android-2.0-hightlights.html
অ্যান্ড্রয়েড 2.0 এর HTML5 ভিডিও উপাদান সমর্থন করা উচিত। আমি মোটোরোলা ড্রয়েড ব্যবহার করে এটি অর্জন করতে সক্ষম হয়ে উঠিনি, এবং এইচটিএমএল 5 ভিডিও উদাহরণ পৃষ্ঠাগুলির কোনওটিতে সফলভাবে একটি ভিডিও দেখতে সক্ষম হইনি। যেহেতু কুইকটাইম বা ফ্ল্যাশটির পক্ষে বর্তমানে সমর্থন নেই, ওয়েব পৃষ্ঠায় এমপি 4 ভিডিও এম্বেড করার জন্য আমি কেবল এটিই ভাবতে পারি। এর সাথে কারও ভাগ্য হয়েছে?
উত্তর:
আমি এটি নিয়ে কিছুটা পরীক্ষা-নিরীক্ষা করেছি এবং আমি যা বলতে পারি তার থেকে তিনটি জিনিস প্রয়োজন:
এই পৃষ্ঠায় ডেমোটি দেখুন: http://broken-links.com/tests/video/
আইএফ এবং অ্যান্ড্রয়েড, সমস্ত ভিডিও-সক্ষম ডেস্কটপ ব্রাউজারগুলিতে এটি আফাইক কাজ করে।
মার্কআপটি এখানে:
<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>
এবং আমি জেএস এ আছে:
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
আমি এটি একটি স্যামসং গ্যালাক্সি এস এ পরীক্ষা করেছি এবং এটি দুর্দান্ত কাজ করে।
রোমানের উত্তর আমার পক্ষে ভাল কাজ করেছে - বা কমপক্ষে, এটি আমার প্রত্যাশা ছিল তা আমাকে দিয়েছে। ফোনের নেটিভ অ্যাপ্লিকেশনটিতে ভিডিওটি খোলার বিষয়টি ঠিক আইফোনের মতোই is
এটি সম্ভবত আপনার দৃষ্টিভঙ্গিটি সামঞ্জস্য করার উপযুক্ত এবং ভিডিওর নিজস্ব অ্যাপ্লিকেশনটিতে পূর্ণস্ক্রিন প্লে হবে এবং এর জন্য কোডিং আশা করে। এটি হতাশাজনক যে ভিডিওটি ক্লিক করা আইফোনের মতো এটি খেলতে যথেষ্ট নয়, তবে এটি চালু করার জন্য এটি একটি অনক্লিক বৈশিষ্ট্য গ্রহণ করে, এটি বিশ্বের শেষ নয়।
আমার পরামর্শ, এফডাব্লুআইডাব্লু হ'ল একটি পোস্টার চিত্র ব্যবহার করা এবং এটি স্পষ্ট করে তোলে যে এটি ভিডিওটি প্লে করবে। আমি এই মুহূর্তে এমন একটি প্রকল্পে কাজ করছি যা অবিকল এটি করে এবং গ্রাহকরা এতে খুশি হন - এবং তারা নিখরচায় একটি ওয়েব অ্যাপের অ্যান্ড্রয়েড সংস্করণ পাচ্ছেন অবশ্যই, কারণ চুক্তিটি কেবল একটি আইফোন ওয়েব অ্যাপ্লিকেশন।
কেবল উদাহরণের জন্য, একটি কার্যকারী অ্যান্ড্রয়েড ভিডিও ট্যাগ নীচে। সুন্দর এবং সহজ।
<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
controlsবৈশিষ্ট্যটি ব্যবহার করেন , আপনি বিরতি টিপলে অনক্লিক ইভেন্টটি বাইপাস করা হবে (সুতরাং ভিডিওটি আসলে বিরতি পেয়েছে), তবে যখন আপনি প্লে ক্লিক করেন তখন কিছুই ঘটে না - ভিডিওটি আবার শুরু করতে আপনাকে ভিডিওতে ক্লিক করতে হবে (আসল প্লে বোতামে নয়)।
এখানে আমি অন্তর্ভুক্ত করছি কীভাবে আমার এক বন্ধু নেক্সাস ওয়ান এইচটিএমএলে ভিডিও প্রদর্শনের সমস্যাটি সমাধান করেছেন:
আমি কখনই ভিডিও প্লে ইনলাইন করতে সক্ষম হইনি। আসলে ইন্টারনেটের অনেক লোক স্পষ্টভাবে উল্লেখ করে যে এইচটিএমএল-এ ইনলাইন ভিডিও প্লে হানিকম্বের পর থেকেই সমর্থিত, এবং আমরা ফ্রিও এবং জিঞ্জারব্রেডের সাথে লড়াই করছি ... এছাড়াও ছোট ফোনের জন্য আমি মনে করি যে পূর্ণ স্ক্রিন খেলা খুব স্বাভাবিক - অন্যথায় এতটা দৃশ্যমান নয় । তাই লক্ষ্যটি ছিল ভিডিওটি পুরো স্ক্রিনে উন্মুক্ত করা। যাইহোক, এই থ্রেডে প্রস্তাবিত সমাধানগুলি আমাদের পক্ষে কার্যকর হয়নি - উপাদানটিতে ক্লিক করা কিছুই ট্রিগার করে না। তদতিরিক্ত ভিডিও নিয়ন্ত্রণগুলি প্রদর্শিত হয়েছিল, তবে কোনও পোস্টার প্রদর্শিত হয়নি যাতে ব্যবহারকারীর অভিজ্ঞতা এমনকি অতিশয় ছিল। সুতরাং তিনি যা করেছিলেন তা হ'ল:
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);
}
}
তারপরে এইচটিএমএলটিতে তিনি ভিডিও ট্যাগটি ভিডিওর কাজ করতে ব্যর্থ হতে থাকেন। সুতরাং, অবশেষে তিনি 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>
আমি বুঝতে পারি এটি নিখুঁতভাবে এইচটিএমএল সমাধান নয়, তবে আমরা নেক্সাস ওয়ান ধরণের ফোনের জন্য সবচেয়ে ভাল করতে পেরেছি। এই সমাধানের সমস্ত ক্রেডিট দিমিতর জ্লাটকভ দিমিট্রভের কাছে যায়।
আপনি যদি ম্যানুয়ালি কল করেন তবে 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>
আমার অ্যান্ড্রয়েড ২.২ ব্রাউজারটি এইচটিএমএল 5 টেস্ট.কমের দিকে ইঙ্গিত করে , আমাকে বলেছে যে ভিডিও উপাদানটি সমর্থিত, তবে তালিকাভুক্ত ভিডিও কোডেকের কোনওটিই ... ভিডিওর উপাদানটিকে সমর্থন করাতে কিছুটা অর্থহীন বলে মনে হচ্ছে তবে কোনও কোডেক নেই ??? যদি না পরীক্ষার পৃষ্ঠাটিতে কিছু সমস্যা থাকে।
তবে অডিও উপাদানটির সাথে আমি একই ধরণের পরিস্থিতিটি পেয়েছি: উপাদানটি সমর্থিত, তবে কোনও অডিও ফর্ম্যাট নেই। এখানে দেখো:
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>
এখানে এনকোডিং কনফিগারেশনের কয়েকটি উদাহরণ রয়েছে যা এখানে কাজ করেছে:
এটি আমার পক্ষে কাজ করে:
<video id="video-example" width="256" height="177" poster="image.jpg">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.ogg" type="video/ogg"></source>
This browser does not support HTML5
</video>
শুধুমাত্র যখন। এমপি 4 শীর্ষে থাকে এবং ভিডিওফাইলটি বড় হয় না।
এটি কাজ করার কথা, তবে রেজোলিউশনটি দেখুন: অ্যান্ড্রয়েড 2.0 এবং ওয়েবকিট
ক্যানভাস বাক্সের ঠিক বাইরে কাজ করে, অন্যদিকে জিওলোকেশন এমুলেটরটিতে কাজ করে না বলে মনে হয়। অবশ্যই এটি কাজ করার জন্য আমাকে এটি মক অবস্থানগুলি প্রেরণ করতে হবে, তাই আসল ফোনে এটি কী হবে তা আমার কোনও ধারণা নেই। ভিডিও ট্যাগ দিয়েও আমি একই কথা বলতে পারি। এটিতে ভিডিওটি না খেলতে সমস্যা রয়েছে, তবে আমি মনে করি এটি এমুলেটরটি পরিচালনা করতে পারে তার চেয়ে ভিডিওটি একটি উচ্চতর রেজোলিউশন। কেউ মোটোরোলা ড্রড বা অন্য পরবর্তী-জেনারেট অ্যান্ড্রয়েড ডিভাইসে একবার চেষ্টা করলে আমরা আরও জানব
এটি আপনার প্রশ্নের সঠিক উত্তর নাও দিতে পারে তবে আমরা 3 জিপি বা 3 জিপি 2 ফাইল ফর্ম্যাটটি ব্যবহার করছি। আরটিএসপি প্রোটোকল ব্যবহার করা আরও ভাল তবে অ্যান্ড্রয়েড ব্রাউজার 3 জিপি ফাইল ফর্ম্যাটটিও স্বীকৃতি দেবে।
আপনি যেমন কিছু ব্যবহার করতে পারেন
self.location = URL_OF_YOUR_3GP_FILE
ভিডিও প্লেয়ার ট্রিগার করতে। ফাইলটি স্ট্রিম হবে এবং প্লেব্যাক শেষ হওয়ার পরে, হ্যান্ডলিংটি ব্রাউজারে ফিরে আসবে।
আমার জন্য এটি অ্যান্ড্রয়েড ডিভাইসে বর্তমান ভিডিও ট্যাগ প্রয়োগের সাথে প্রচুর সমস্যা সমাধান করে।
অনুসারে: https://stackoverflow.com/a/24403519/365229
এটি সরল জাভাস্ক্রিপ্ট সহ কাজ করা উচিত:
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(); }পূর্ণস্ক্রীন নির্দেশের আগে আপনাকে খেলতে () ট্রিগার করতে হবে, অন্যথায় অ্যান্ড্রয়েড ব্রাউজারে এটি কেবল পুরো স্ক্রিনে চলে যাবে তবে এটি খেলতে শুরু করবে না। অ্যান্ড্রয়েড ব্রাউজার, ক্রোম, সাফারি এর সর্বশেষতম সংস্করণ দিয়ে পরীক্ষিত।
আমি এটি অ্যান্ড্রয়েড 2.3.3 এবং 4.4 ব্রাউজারে পরীক্ষা করেছি।
অনেক গবেষণার পরেও এখন পর্যন্ত অনেকগুলি ডিভাইসে, আমি সাধারণ উপসংহারে পৌঁছেছি যা ফর্ম্যাটের MP4চেয়ে অনেক কম সমর্থিত MOV। সুতরাং, আমি MOVসমস্ত ব্রাউজারে সমস্ত অ্যান্ড্রয়েড এবং অ্যাপল ডিভাইস দ্বারা সমর্থিত ফর্ম্যাটটি ব্যবহার করছি । আমি আবহাওয়াটি ডিভাইসটি একটি মোবাইল ডিভাইস বা একটি ডেস্কটপ ব্রাউজার হিসাবে সনাক্ত করেছি এবং সে 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অ্যান্ড্রয়েড ডিভাইসে ভিডিও চালানোর জন্য আমি ফর্ম্যাটটি ব্যবহার করার চেষ্টা করেছি তবে সেটি ভাল হয়নি did সুতরাং কিছু পরীক্ষা এবং ত্রুটির পরে, আমি .webmকোনও অতিরিক্ত জাভাস্ক্রিপ্ট বা জিকুয়েরি ছাড়াই ভিডিওটি ফর্ম্যাট এবং নিম্নলিখিত কোডটিতে রূপান্তর করেছি :
<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>
এটি একটি পুরানো অ্যান্ড্রয়েড ডিভাইসে (কমপক্ষে 2020 সালের কয়েক বছরের পুরানো) কাজ করেছে।
এইচটিএমএল 5 উভয় গুগল (অ্যান্ড্রয়েড) ফোনে যেমন গ্যালাক্সি এস এবং আইফোন সমর্থন করে। আইফোন তবে ফ্ল্যাশ সমর্থন করে না, যা গুগল ফোনগুলি সমর্থন করে।