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

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

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

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

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

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

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

问题总结:

希望有懂视频相关的大佬能够指点如何实现效果,或者指点相关方向我自己去查阅
阅读 2k
评论
    4 个回答

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

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

        • 18.3k

        其实可以细化问题

        1. 切换广告和视频

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

          1. bilibili那样,自定义控件
          2. 样式改变,不覆盖在video上面。
          • 0
          • 新人请关照

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

          该答案已被忽略,原因:

            撰写回答

            登录后参与交流、获取后续更新提醒

            相似问题
            推荐文章