如何实现视频中插入广告并可以用按钮跳过广告的效果

Question

问题背景
需要实现一个视频播放的需求而且要加入可以点击按钮跳过的广告

自己的思路
首先考虑如果要实现广告可以跳过，那就是说广告和视频不是一个视频而是分段的的，点击跳过就直接进入下一段视频，就能实现点击按钮跳过广告的效果

在查阅了<embed>、<video>等方案后发现是不能直接跳过当前视频播放下一个源的，而且很多资料表示这样的标签有很多兼容性问题，然后我就考虑js封装的播放器而非原生。就现有的资料看到最多的有video.js和flv.js

• 在查阅资料后发现videojs是基于html5的，所以只有mp4，webm，ogv三种格式支持
• flv.js可以支持flv

根据之前查阅的关于视频格式的资料，我看到的观点为：flv:与avi、mp4等作为音视频的容器不同在于，flv是流式文件格式。可以边下载边观看的文件。它主要是下载一部分文件到缓存区，然后再从缓存区里面拿数据。

因此在考虑到这次的视频为长视频后我认为flv是比mp4等格式是更加合理的。但是flv.js的文档实在太少了，没有找到能够插入广告并跳过或者视频源切换之类的功能

问题总结：

希望有懂视频相关的大佬能够指点如何实现效果，或者指点相关方向我自己去查阅

Answer 1

广告和视频是两个video文件。点击切换的时候用js更改video的src试试

Answer 2

如果不是特别严格的情况下，最简单的做法是用两个播放器（video）层叠，利用js控制播放状态和层级，这样既能实现跳过广告，也能保证原视频的缓存不重置

Answer 3

其实可以细化问题

1. 切换广告和视频

   1. 粒度更细的流程控制，如果说每一帧都可以控制，那么拼接很简单吧
   2. video1 video2，video1暂停隐藏 video2播放显示

2. 按钮覆盖在video上

   1. bilibili那样，自定义控件
   2. 样式改变，不覆盖在video上面。

Answer 4

我想问一下您的最终解决方案是什么