怎么设置视频封面

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>
    

复制代码