ทำให้โปสเตอร์วิดีโอ HTML5 มีขนาดเท่ากับวิดีโอ


96

มีใครทราบวิธีปรับขนาดโปสเตอร์วิดีโอ HTML5 ให้พอดีกับขนาดของวิดีโอไหม

นี่คือ jsfiddle ที่แสดงปัญหา: http://jsfiddle.net/zPacg/7/

นี่คือรหัสนั้น:

HTML:

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

CSS:

video{
border:1px solid red;
}​

สังเกตว่าสี่เหลี่ยมผืนผ้าสีส้มไม่ได้ปรับขนาดให้เท่ากับขอบสีแดงของวิดีโอ

นอกจากนี้การเพิ่ม CSS ด้านล่างก็ใช้ไม่ได้เช่นกันเนื่องจากปรับขนาดวิดีโอพร้อมกับโปสเตอร์:

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

1
ฉันไม่คิดว่าคุณจะใช้ "%" ในแอตทริบิวต์ได้ อย่างไรก็ตามการเปลี่ยนเป็น 100 ไม่สามารถแก้ไขปัญหาได้ ฉันจะใช้รูปแบบสื่อ -webkit อย่า
albert

@ อัลเบิร์ตขอบคุณฉันไม่เห็นข้อมูลอ้างอิงใด ๆposterในลิงก์ที่คุณส่งมา คุณช่วยแสดงให้ฉันเห็นได้ไหมว่า CSS มีลักษณะอย่างไรสำหรับสิ่งที่คุณกำลังพูดถึงเช่น " -webkit media style" ขอบคุณ
ทิมปีเตอร์สัน

นั่นคือสิ่งที่ฉันหมายถึง "การเลือก"; นั่นคือรูปแบบสื่อเฉพาะของ Chrome ฉันคุ้นเคยกับพวกเขาเพียงอย่างคลุมเครือนับประสาตัวเลือกหลอกที่พวกเขาประกาศ; โดยไม่มีจุดเริ่มต้น: ฉันจะมองหาการประกาศด้วยช่องว่างภายใน ฯลฯ
albert

คำตอบ:


52

คุณสามารถใช้ภาพโปสเตอร์แบบโปร่งใสร่วมกับภาพพื้นหลัง CSS เพื่อให้ได้สิ่งนี้ ( ตัวอย่าง ) อย่างไรก็ตามหากต้องการให้พื้นหลังยาวเท่ากับความสูงและความกว้างของวิดีโอคุณจะต้องใช้<img>แท็กที่มีตำแหน่งแน่นอน ( ตัวอย่าง )

นอกจากนี้ยังสามารถตั้งค่าbackground-sizeเป็น100% 100%ในเบราว์เซอร์ที่รองรับbackground-size ( ตัวอย่าง )


อัปเดต

วิธีที่ดีกว่าคือใช้object-fitคุณสมบัติ CSS ตามที่ @Lars Ericsson แนะนำ

ใช้

object-fit: cover;

หากคุณไม่ต้องการแสดงส่วนต่างๆของภาพที่ไม่พอดีกับอัตราส่วนภาพของวิดีโอและ

object-fit: fill;

เพื่อยืดภาพให้พอดีกับอัตราส่วนภาพวิดีโอของคุณ

ตัวอย่าง


- @ user1419007 ตัวอย่างของคุณจะแสดงภาพพื้นหลังซ้ำ เนื่องจากคุณแนะนำว่านี่ไม่ใช่วิธีที่ดีที่สุดคุณช่วยให้ jsfiddle สาธิตวิธีใช้กลยุทธ์ที่ 2 ของคุณได้ไหม
tim peterson

ฉันno-repeatแก้ไขภาพพื้นหลังแล้ว สำหรับวิธีแก้ปัญหาอื่น ๆ ขอเวลาฉันสักครู่เพื่อแก้ปัญหานี้
user2428118

แก้ไข: เพิ่มตัวอย่างสำหรับโซลูชันที่เสนอที่สอง
user2428118

ขอบคุณสำหรับสิ่งนั้นเราต้องการจาวาสคริปต์เพื่อเปลี่ยนz-indexภาพเพื่อให้วิดีโอสามารถมองเห็นได้เมื่อคุณเริ่มเล่น
tim peterson

2
.. ตัวอย่างที่สองใช้ไม่ได้ใน chrome? คุณจะต้องให้ div นอกตำแหน่งเหมือนjsfiddle.net/xh8er ; จากนั้นก็ใช้งานได้
commonpike

88

ขึ้นอยู่กับเบราว์เซอร์ที่คุณกำหนดเป้าหมายคุณสามารถใช้คุณสมบัติที่พอดีกับวัตถุเพื่อแก้ปัญหานี้:

object-fit: cover;

หรืออาจfillเป็นสิ่งที่คุณกำลังมองหา ยังคงอยู่ภายใต้การพิจารณาสำหรับ IE


3
นี่คือคำตอบแน่นอน
cilphex

1
+1 สำหรับลิงก์ไปยังคุณสมบัติที่พอดีกับวัตถุโดยใช้object-fit: initialสำหรับฉัน
FireBrand

"object-fit: fill" ได้เคล็ดลับ! เช่นเดียวกับ "object-fit: initial" (แปลกเพราะฉันไม่เห็นค่า "เริ่มต้น" ในข้อมูลจำเพาะที่developer.mozilla.org/en-US/docs/Web/CSS/object-fit ) ทั้ง "ปก" และ "มี" บิดเบือนโปสเตอร์ที่กำลังเล่นอยู่ในเบราว์เซอร์ดั้งเดิมของ Samsung ภายใต้ Android 5.1.1 และไม่มีผลต่อ IE!
plugincontainer

1
พวกคุณกำหนดเป้าหมายตัวเลือก css สำหรับกฎความพอดีของวัตถุ? เนื่องจากไม่มีวิธีกำหนดเป้าหมายภาพโปสเตอร์ฉันจึงถือว่าคุณใช้video{object-fit: cover;}?
เริ่ม

@ zıəsuɐɟəʇs In my css it's ... video [poster] {object-fit: fill}
plugincontainer

27

หรือคุณสามารถใช้เพียงแค่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>

2
ตอบดีกว่า. ไม่ทำลายอะไรและการไม่โหลดวิดีโอล่วงหน้าจะไม่ส่งผลเสียต่อเพจของคุณเว้นแต่ว่าจะเป็นไซต์ที่เน้นวิดีโอเป็นศูนย์กลาง +1.
totalNotLizards

1
ฉันปรับขนาดพื้นหลังขณะเล่นบนโทรศัพท์มือถือ จากคำถาม / คำตอบอื่น ๆ ที่นี่ (เช่นstackoverflow.com/questions/18229974/… ) ดูเหมือนว่าปัญหาคือการทำสำเนาภาพ (พื้นหลัง css ของโปรแกรมเล่นและโปสเตอร์องค์ประกอบวิดีโอ) การแก้ไขนี้ได้ผล
plugincontainer

1
อืม ... ใช้งานได้ใน Chrome แต่สร้างปัญหาใหม่ในเบราว์เซอร์ Android ดั้งเดิม ดู: stackoverflow.com/questions/39546792/…
plugincontainer

แก้ไขในที่สุด - ดูคำตอบของ Lars Ericsson ด้านล่าง
plugincontainer

27

ฉันกำลังเล่นกับสิ่งนี้และลองวิธีแก้ปัญหาทั้งหมดในที่สุดวิธีแก้ปัญหาที่ฉันใช้คือคำแนะนำจาก Inspector ของ Google Chrome หากคุณเพิ่มสิ่งนี้ลงใน CSS ของคุณมันได้ผลสำหรับฉัน:

video{
   object-fit: inherit;
}

ขอบคุณ! นี่เป็นการแก้ไขที่แน่นอนที่ฉันต้องการเพื่อลบช่องว่างของวิดีโอที่ด้านบนและด้านล่าง
cpcdev

12

โซลูชันของฉันรวมคำตอบของผู้ใช้ 2428118 และ Veiko Jäägerซึ่งช่วยให้สามารถโหลดล่วงหน้าได้ แต่ไม่ต้องใช้ภาพโปร่งใสแยกต่างหาก เราใช้ภาพโปร่งใสขนาด 1px เข้ารหัส base64 แทน

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

ต้องเป็นชื่อภาพหรือเส้นทางที่สมบูรณ์เท่านั้น?

ในเบราว์เซอร์เนทีฟของ Android (เบราว์เซอร์ชื่อ "อินเทอร์เน็ต") บนซัมซุงของฉันโปสเตอร์ปรับขนาด ... หายนะในการเล่น วิธีแก้ปัญหานี้ - gif แบบโปร่งใสเป็นโปสเตอร์และ "โปสเตอร์" เป็นพื้นหลัง - แก้ไขแล้ว แต่ .. ตอนนี้โปสเตอร์ไม่แสดงใน IE-9, 10 หรือ 11
plugincontainer

1
วิธีแก้ไขคือละทิ้ง gif แบบโปร่งใสและโปสเตอร์เป็นพื้นหลังและใช้ (ดูคำตอบของ Lars Ericsson ด้านบน) วิดีโอ [โปสเตอร์] {object-fit: fill} แก้ไขปัญหาบนเบราว์เซอร์ดั้งเดิมของ Samsung ภายใต้ Android 5.1.1 และ IE แสดงโปสเตอร์โดยไม่มีปัญหา
plugincontainer

วิธีนี้ดีกว่าโดยเฉพาะสำหรับมือถือ object-fitไม่ได้ป้องกันการบิดเบือนขนาดposterที่เกิดขึ้นบน Android ในขณะที่ยังโหลดเนื้อหาอยู่
TheLinguist

5

ฉันคิดไอเดียนี้ขึ้นมาและได้ผลดี เอาล่ะโดยพื้นฐานแล้วเราต้องการกำจัดเฟรมแรกของวิดีโอออกจากจอแสดงผลแล้วปรับขนาดโปสเตอร์เป็นขนาดจริงของวิดีโอ หากเราตั้งค่ามิติข้อมูลเราได้ดำเนินการอย่างใดอย่างหนึ่งแล้ว จากนั้นเหลือเพียงหนึ่งเดียว ตอนนี้วิธีเดียวที่ฉันรู้ในการกำจัดเฟรมแรกคือกำหนดโปสเตอร์จริงๆ อย่างไรก็ตามเราจะให้วิดีโอปลอมซึ่งไม่มีอยู่จริง ซึ่งจะส่งผลให้หน้าจอว่างเปล่าโดยมีพื้นหลังโปร่งใส เช่นพื้นหลังของ div หลักของเราจะมองเห็นได้

ใช้งานง่าย แต่อาจใช้ไม่ได้กับเว็บเบราว์เซอร์ทั้งหมดหากคุณต้องการปรับขนาดมิติของพื้นหลังของ div เป็นขนาดของวิดีโอเนื่องจากโค้ดของฉันใช้ "background-size"

HTML / HTML5:

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

CSS:

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

ที่ฉลาดฉันให้มันยิง มันไม่สมบูรณ์แบบ แต่ไปถึงที่นั่น ... jsfiddle.net/trpeters1/NJtc9
Tim peterson

ใช่คุณพูดถูก จากการดู jsfiddle ของคุณตอนนี้ฉันรู้แล้วว่าขนาดของวิดีโอต้องถูกต้องไม่ใช่แค่องค์ประกอบของวิดีโอ ฉันเดาว่าฉันโชคดีเมื่อได้ลองใช้บนหน้าของฉัน
Jonathan J

5
<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*/
}

โปรดทราบว่าการควบคุมวิดีโออยู่เหนือรูปภาพของเราดังนั้นภาพของเราจึงไม่แสดงอย่างสมบูรณ์ หากคุณใช้หน้าปกแบบพอดีกับวัตถุให้แก้ไขรูปภาพของคุณในแอปภาพเป็น photoshop และเพิ่มเนื้อหาด้านล่างสุด


1

ฉันมีปัญหาที่คล้ายกันและเพิ่งแก้ไขโดยการสร้างภาพที่มีอัตราส่วนภาพเดียวกับวิดีโอของฉัน (16: 9) ความกว้างของฉันถูกตั้งไว้ที่ 100% บนแท็กวิดีโอและตอนนี้รูปภาพ (320 x 180) พอดี หวังว่าจะช่วยได้!



1

คุณสามารถใช้โปสเตอร์เพื่อแสดงภาพแทนวิดีโอบนอุปกรณ์เคลื่อนที่ (หรืออุปกรณ์ที่ไม่รองรับฟังก์ชันการเล่นวิดีโออัตโนมัติ) เนื่องจากอุปกรณ์เคลื่อนที่ไม่รองรับฟังก์ชันการเล่นวิดีโออัตโนมัติ

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

อันที่จริงแล้ว iOS 10+ รองรับฟังก์ชันการเล่นวิดีโออัตโนมัติด้วยคุณสมบัติ playinline
Lukas Petr

คุณระบุแอตทริบิวต์นั้นได้อย่างไร?
Khom Nazid

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


0
  <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>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.