এইচটিএমএল 5 ভিডিও পোস্টারকে ভিডিওর মতোই আকারের করুন

Question 1

এইচটিএমএল 5 ভিডিও পোস্টারকে কীভাবে আকার পরিবর্তন করতে হয় তা কি কেউ জানেন যে এটি ভিডিওর সঠিক মাত্রার সাথে খাপ খায়?

এখানে একটি জাসফিডল যা সমস্যাটি দেখায়: http://jsfiddle.net/zPacg/7/

এই কোডটি এখানে:

এইচটিএমএল:

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>

সিএসএস:

video{
border:1px solid red;
}

লক্ষ্য করুন যে কমলা আয়তক্ষেত্রটি ভিডিওর লাল সীমানায় স্কেল করে না।

এছাড়াও, কেবল নীচে সিএসএস যুক্ত করা পোস্টারের পাশাপাশি ভিডিওটিকে পুনরায় সাজানোর কারণে কার্যকর হয় না:

video[poster]{
height:100%;
width:100%;
}

Question 2

আপনি এই (অর্জন একটি সিএসএস ব্যাকগ্রাউন্ড ইমেজ সঙ্গে একযোগে একটি স্বচ্ছ পোস্টার চিত্র ব্যবহার করতে পারেন উদাহরণস্বরূপ ); তবে, একটি ভিডিওর উচ্চতা এবং প্রস্থে প্রসারিত হওয়ার জন্য, আপনাকে একেবারে অবস্থানযুক্ত <img>ট্যাগ ব্যবহার করতে হবে ( উদাহরণস্বরূপ )।

এছাড়া করা সম্ভব সেট background-sizeকরার100% 100% মধ্যে ব্রাউজারে সমর্থনbackground-size ( উদাহরণস্বরূপ )।

হালনাগাদ

এটি করার আরও ভাল উপায় object-fitহ'ল @ লার্স এরিকসনের পরামর্শ অনুসারে CSS সম্পত্তি ব্যবহার করা ।

ব্যবহার

object-fit: cover;

আপনি যদি চিত্রটির সেই অংশগুলি প্রদর্শন করতে না চান যা ভিডিওর অনুপাতের অনুপাতের সাথে খাপ খায় না

object-fit: fill;

আপনার ভিডিওর দিক অনুপাতের সাথে মানানসই চিত্রটি প্রসারিত করতে

উদাহরণ

Question 3

আপনি কোন ব্রাউজারগুলিকে টার্গেট করছেন তার উপর নির্ভর করে আপনি এটি সমাধান করার জন্য অবজেক্ট-ফিট সম্পত্তিটির জন্য যেতে পারেন :

object-fit: cover;

অথবা fillআপনি যা খুঁজছেন তা হতে পারে। IE এর জন্য এখনও বিবেচনাধীন ।

Question 4

অথবা আপনি preload="none"ভিডিও ব্যাকগ্রাউন্ড দৃশ্যমান করতে কেবল অ্যাট্রিবিউট ব্যবহার করতে পারেন । এবং আপনি background-size: cover;এখানে ব্যবহার করতে পারেন ।

 video {
   background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
 }

 <video preload="none" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 </video>

Question 5

আমি এটির সাথে খেলছিলাম এবং সবগুলি সমাধান চেষ্টা করেছিলাম, শেষ পর্যন্ত আমি যে সমাধানটি দিয়েছিলাম সেটি হ'ল গুগল ক্রোমের পরিদর্শকের পরামর্শ। আপনি যদি এটি আপনার সিএসএসে যুক্ত করেন তবে এটি আমার পক্ষে কাজ করেছে:

video{
   object-fit: inherit;
}

Question 6

আমার সমাধানটিতে ব্যবহারকারী 2428118 এবং ভাইকো জাগারের উত্তরগুলি একত্রিত করা হয়েছে, প্রিলোডিংয়ের জন্য অনুমতি দিচ্ছে তবে আলাদা স্বচ্ছ চিত্রের প্রয়োজন ছাড়াই। আমরা এর পরিবর্তে একটি বেস 64 এনকোডেড 1px স্বচ্ছ চিত্র ব্যবহার করি।

<style type="text/css" >
    video{
        background: transparent url("poster.jpg") 50% 50% / cover no-repeat ;
    }
</style>
<video controls poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

Question 7

আমি এই ধারণাটি নিয়ে এসেছি এবং এটি পুরোপুরি কার্যকর হয়। ঠিক আছে তাই মূলত আমরা ভিডিওটি প্রদর্শন থেকে প্রথম ফ্রেম থেকে মুক্তি দিতে এবং তারপরে পোস্টারগুলিকে প্রকৃত আকারে আকার দিতে চাই। এরপরে যদি আমরা মাত্রা নির্ধারণ করি তবে আমরা এই কাজগুলির মধ্যে একটি সম্পন্ন করেছি। তারপরে একটি মাত্র রয়ে যায়। সুতরাং এখন, প্রথম ফ্রেমটি থেকে মুক্তি পাওয়ার জন্য আমার জানা একমাত্র উপায়টি আসলে একটি পোস্টার সংজ্ঞায়িত করা। তবে আমরা ভিডিওটি একটি নকল একটি দিতে যাচ্ছি যা বিদ্যমান নেই। এর ফলে ব্যাকগ্রাউন্ড স্বচ্ছ সহ একটি ফাঁকা প্রদর্শন ঘটবে। অর্থাৎ আমাদের পিতামাতার ডিভের পটভূমি দৃশ্যমান হবে।

ব্যবহারের জন্য সহজ, তবে আপনি যদি ওয়েব কোডটির ব্যাকগ্রাউন্ডের মাত্রাটি ভিডিওর মাত্রায় আকার পরিবর্তন করতে চান তবে এটি সমস্ত ওয়েব ব্রাউজারগুলির সাথে কাজ করতে পারে না কারণ আমার কোডটি "ব্যাকগ্রাউন্ড-আকার" ব্যবহার করছে।

এইচটিএমএল / এইচটিএমএল 5:

<div class="video_poster">
    <video poster="dasdsadsakaslmklda.jpg" controls>
        <source src="videos/myvideo.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
<div>

সিএসএস:

video{
    width:694px;
    height:390px;
}
.video_poster{
    width:694px;
    height:390px;
    background-size:694px 390px;
    background-image:url(images/myvideo_poster.jpg);
}

Question 8

<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
    Sorry, your browser doesn't support embedded videos.
</video>

আবরণ

video{
   object-fit: cover; /*to cover all the box*/
}

পূরণ করুন

video{
   object-fit: fill; /*to add black content at top and bottom*/
   object-position: 0 -14px; /* to center our image*/
}

নোট করুন যে ভিডিও চিত্রগুলি আমাদের চিত্রের ওপরে রয়েছে , তাই আমাদের চিত্রটি পুরোপুরি প্রদর্শিত হয় না। আপনি যদি অবজেক্ট-ফিট কভার ব্যবহার করছেন, ফটোশপ হিসাবে ভিজ্যুয়াল অ্যাপে আপনার চিত্রটি সম্পাদনা করুন এবং একটি মার্জিন নীচের সামগ্রী যুক্ত করুন।

Question 9

আমার অনুরূপ সমস্যা ছিল এবং আমার ভিডিওর মতো একই দিক অনুপাত সহ একটি চিত্র তৈরি করে এটি ঠিক করেছি (16: 9)। আমার প্রস্থটি ভিডিও ট্যাগে 100% এ সেট করা হয়েছে এবং এখন চিত্রটি (320 x 180) পুরোপুরি ফিট করে। আশা করি এইটি কাজ করবে!

Question 10

থাম্ব উত্পন্ন করার পরে আপনি চিত্রের আকার পরিবর্তন করতে পারেন

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);

Question 11

আপনি মোবাইল ডিভাইসে ভিডিওর পরিবর্তে চিত্র প্রদর্শন করতে পোস্টার ব্যবহার করতে পারেন (বা এমন ডিভাইস যা ভিডিও অটোপ্লে কার্যকারিতা সমর্থন করে না)। কারণ মোবাইল ডিভাইসগুলি ভিডিও অটোপ্লে কার্যকারিতা সমর্থন করে না।

<div id="wrap_video">
<video preload="preload" id="Video" autoplay="autoplay" loop="loop" poster="default.jpg">
<source src="Videos.mp4" type="video/mp4">
Your browser does not support the <code>video</code> tag.
</video>
</div>

এখন আপনি কেবল পোস্টার বৈশিষ্ট্যটি স্টাইল করতে পারেন যা মিডিয়া-ক্যোয়ারির মাধ্যমে মোবাইল ডিভাইসের জন্য ভিডিও ট্যাগের মধ্যে রয়েছে।

#wrap_video
{
width:480px;
height:360px;
position: relative;
} 
@media (min-width:360px) and (max-width:780px)
{
video[poster]
{
top:0 !important;
left:0 !important;
width:480px !important;
height:360px !important;
position: absolute !important;
}
}

Question 12

height:500px;
min-width:100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size:100% 100%;
object-fit:cover;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

Question 13

এটি কাজ করে

<video class="video-box" poster="/" controls>
    <source src="some source" type="video/mp4">
</video>

এবং সিএসএস

.video-box{
 background-image: 'some image';
 background-size: cover;
}

Question 14

  <div class="container">
        <video poster="~/Content/WebSite/img/SiteSetting/Load.gif" autoplay muted loop class="myVideo">
            <source src="~/Content/WebSite/images/VideoTube.mp4" type="video/mp4" />
        </video>

    </div>



 <style>
    .myVideo {
position: absolute;
right: 0;
left: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: inherit;
 }
@media only screen and (max-width:768px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
    }
   }

     @media only screen and (max-width:320px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
  }
}
</style>