怎么設置視頻封面

ysx24

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

1 貢獻

最佳答案

把你后臺的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>
    

復制代碼

參數個數: 2
參數提示語:
封面路徑
視頻路徑

• 文強
• 發表于2023-12-10 12:14:37
• 詳細答案 >

量子

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

文強

把你后臺的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>
    

復制代碼

參數個數: 2
參數提示語:
封面路徑
視頻路徑

ysx24

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

文強

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

在代碼 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>
    

復制代碼

barniagoody

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

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

文強

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

這個上傳圖片的大小時根據你播放器的高度和寬度，然后發帖時在第一選項里輸入圖片地址就可以了。

barniagoody

文強 發表于 2025-6-7 13:07
這個上傳圖片的大小時根據你播放器的高度和寬度，然后發帖時在第一選項里輸入圖片地址就可以了。 ...

老哥，我就用的系統默認自帶的播放器 ，能給一個完整的代碼？我真的不會寫。
“然后發帖時在第一選項里輸入圖片地址就可以了‘，這個看不明白，能給截圖演示一下嗎？
跪謝

barniagoody

barniagoody 發表于 2025-6-7 16:55
老哥，我就用的系統默認自帶的播放器 ，能給一個完整的代碼？我真的不會寫。
“然后發帖時在第一選項里輸 ...

老哥，你這個教程第11行，/* 圖片尺寸 */，你直接幫我寫好行嗎？我自己不會寫，謝謝你

barniagoody

文強 發表于 2025-6-7 13:07
這個上傳圖片的大小時根據你播放器的高度和寬度，然后發帖時在第一選項里輸入圖片地址就可以了。 ...

老哥，你這個教程第11行，/* 圖片尺寸 */，你直接幫我寫好行嗎？我自己不會寫，謝謝