怎么設(shè)置視頻封面

ysx24

如視頻鏈接
或者
[mp4]視頻鏈接[/mp4]
怎么為視頻添加本地或者遠(yuǎn)程圖片為視頻封面，避免視頻未播放時(shí)黑乎乎的

1 貢獻(xiàn)

最佳答案

把你后臺(tái)的mp4編輯器代碼修改為：

1. <div align="center">
   
2. <video width="854"  controls style="max-width:100%" allowfullscreen controls="controls" poster ="{1}" >
   
3.         <source src="{2}"  type="video/mp4" />
   
4.         <source src="{2}"  type="video/ogg" />
   
5.         您的瀏覽器不支持HTML5視頻。
   
6. 
   
7.     <div id="poster" class="poster" />
   
8.       <img class="poster" />
   
9.     </div>
   
10. 
    
11.     <style>
    
12.      /* 圖片尺寸 */
    
13.       .poster img {
    
14.         width: 100% !important;
    
15.         height: 100% !important;
    
16.         object-fit: cover;
    
17.       }
    
18.     </style>
    
19. </video>
    
20. </div>
    

復(fù)制代碼

參數(shù)個(gè)數(shù): 2
參數(shù)提示語(yǔ):
封面路徑
視頻路徑

• 文強(qiáng)
• 發(fā)表于2023-12-10 12:14:37
• 詳細(xì)答案 >

量子

制作一張圖片。上傳到服務(wù)器或者論壇帖子。復(fù)制圖片地址，填入插件的圖片地址欄。

文強(qiáng)

把你后臺(tái)的mp4編輯器代碼修改為：

1. <div align="center">
   
2. <video width="854"  controls style="max-width:100%" allowfullscreen controls="controls" poster ="{1}" >
   
3.         <source src="{2}"  type="video/mp4" />
   
4.         <source src="{2}"  type="video/ogg" />
   
5.         您的瀏覽器不支持HTML5視頻。
   
6. 
   
7.     <div id="poster" class="poster" />
   
8.       <img class="poster" />
   
9.     </div>
   
10. 
    
11.     <style>
    
12.      /* 圖片尺寸 */
    
13.       .poster img {
    
14.         width: 100% !important;
    
15.         height: 100% !important;
    
16.         object-fit: cover;
    
17.       }
    
18.     </style>
    
19. </video>
    
20. </div>
    

復(fù)制代碼

參數(shù)個(gè)數(shù): 2
參數(shù)提示語(yǔ):
封面路徑
視頻路徑

ysx24

有效，非常感謝，收藏了
對(duì)了，下載按鈕是否能夠隱藏或者去掉

文強(qiáng)

ysx24 發(fā)表于 2023-12-10 12:48
有效，非常感謝，收藏了
對(duì)了，下載按鈕是否能夠隱藏或者去掉

在代碼 allowfullscreen 的后面添加 controlsList="nodownload" ，完整代碼：

1. <div align="center">
   
2. <video width="854"  controls style="max-width:100%" allowfullscreen controlsList="nodownload" controls="controls" poster ="{1}" >
   
3.         <source src="{2}"  type="video/mp4" />
   
4.         <source src="{2}"  type="video/ogg" />
   
5.         您的瀏覽器不支持HTML5視頻。
   
6. 
   
7.     <div id="poster" class="poster" />
   
8.       <img class="poster" />
   
9.     </div>
   
10. 
    
11.     <style>
    
12.      /* 圖片尺寸 */
    
13.       .poster img {
    
14.         width: 100% !important;
    
15.         height: 100% !important;
    
16.         object-fit: cover;
    
17.       }
    
18.     </style>
    
19. </video>
    
20. </div>
    

復(fù)制代碼

barniagoody

文強(qiáng) 發(fā)表于 2023-12-10 13:12
在代碼 allowfullscreen 的后面添加 controlsList="nodownload" ，完整代碼：

老哥，這個(gè)代碼能適用于3.5嗎？搞了很久還是黑色封面。再問(wèn)一下，代碼中的“圖片尺寸”，你能改一個(gè)完整的代碼嗎，純小白，這里不會(huì)寫(xiě)，我只想復(fù)制粘貼，謝謝

文強(qiáng)

barniagoody 發(fā)表于 2025-6-7 12:58
老哥，這個(gè)代碼能適用于3.5嗎？搞了很久還是黑色封面。再問(wèn)一下，代碼中的“圖片尺寸”，你能改一個(gè)完整 ...

這個(gè)上傳圖片的大小時(shí)根據(jù)你播放器的高度和寬度，然后發(fā)帖時(shí)在第一選項(xiàng)里輸入圖片地址就可以了。

barniagoody

文強(qiáng) 發(fā)表于 2025-6-7 13:07
這個(gè)上傳圖片的大小時(shí)根據(jù)你播放器的高度和寬度，然后發(fā)帖時(shí)在第一選項(xiàng)里輸入圖片地址就可以了。 ...

老哥，我就用的系統(tǒng)默認(rèn)自帶的播放器 ，能給一個(gè)完整的代碼？我真的不會(huì)寫(xiě)。
“然后發(fā)帖時(shí)在第一選項(xiàng)里輸入圖片地址就可以了‘，這個(gè)看不明白，能給截圖演示一下嗎？
跪謝

barniagoody

barniagoody 發(fā)表于 2025-6-7 16:55
老哥，我就用的系統(tǒng)默認(rèn)自帶的播放器 ，能給一個(gè)完整的代碼？我真的不會(huì)寫(xiě)。
“然后發(fā)帖時(shí)在第一選項(xiàng)里輸 ...

老哥，你這個(gè)教程第11行，/* 圖片尺寸 */，你直接幫我寫(xiě)好行嗎？我自己不會(huì)寫(xiě)，謝謝你

barniagoody

文強(qiáng) 發(fā)表于 2025-6-7 13:07
這個(gè)上傳圖片的大小時(shí)根據(jù)你播放器的高度和寬度，然后發(fā)帖時(shí)在第一選項(xiàng)里輸入圖片地址就可以了。 ...

老哥，你這個(gè)教程第11行，/* 圖片尺寸 */，你直接幫我寫(xiě)好行嗎？我自己不會(huì)寫(xiě)，謝謝