多语言展示
当前在线:743今日阅读:167今日分享:16

js设置视频预览图片

设置视频海报的几种方式 可以直接给video标签添加poster属性,也可以使用js给video添加poster属性。
工具/原料
1

电脑

2

浏览器

3

编辑器

方法/步骤
1

直接给video标签添加poster属性

2

代码:效果图:

3

使用js给video添加poster属性。

4

代码:var video1 = document.getElementById('video1'); var videoSrc= 'images/poster.png'; video1.setAttribute('poster',videoSrc);效果图:

5

还有一种是使用js获取视频第一帧的截图 html和js代码:

6

代码: 

     
                  
         
     
  
  效果图:

7

现在已经获取到 第一帧的截图,设置其css样式即可。

推荐信息