HTML video 在原有视频前增加广告视频

忘是亡心i 2022-12-31 11:19 176阅读 0赞

需要在播放视频前增加一个广告，实现代码如下：

<script>
        window.onload=function(){ 
        	// 我这块是一个页面里多个video标签, 所以需要用id区分
            $('.course_lists').each(function (n) { 
                var id = $(this).attr('id');
                $(this).find('video').attr('id','video_'+id);
                    var i = id.split('_')[1];
                    guanggao(i)
            })
        }
        // 贴片广告 2020-12-29 13:42:19 刘啸宇
        var guanggao =function(id){ 
        	// 广告资源
            var nextVideo ="/ceshi.mp4";
            var videoPlayer = document.getElementById('video_lists_'+id);
            var _cur_video_src = videoPlayer.src;
            // 目的是为了后边 remove 
            var handle = function(videoPlayer, nextVideo){ 
                videoPlayer.src = nextVideo;
                // 自动播放视频时 需搭配 autoplay 和 muted
                videoPlayer.autoplay = 'autoplay';
                videoPlayer.muted = 'muted';
            }
            // 监听 play
            videoPlayer.addEventListener('play',handle(videoPlayer, nextVideo),false)
            // 监听视频播放完毕 ended
            videoPlayer.addEventListener('ended',function (){ 
            	// 去掉 监听
                videoPlayer.removeEventListener('play', handle, false)
                videoPlayer.src = _cur_video_src;
                // 跳转回之前观看的位置
                var currenttime = $("#lists_"+id).attr('data-data');//获取每个课程的上次观看时长
                $('#video_lists_'+id).on("loadedmetadata", function () { 
                    videoPlayer.autoplay = false;
                    videoPlayer.muted = false;
                    videoPlayer.currentTime = currenttime;
                    // 禁止快进
                    var sym_i;
                    setInterval(function () { 
                        var time=videoPlayer.currentTime
                        if(time-sym_i>1){ 
                            videoPlayer.currentTime=sym_i
                        }
                        sym_i=videoPlayer.currentTime
                    },500);
                   
                });
            },true)
        }
    
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关 Video.js - HTML5 视频播放器

Video.js 是专为 HTML5 世界构建的网络视频播放器。它支持 HTML5 视频和媒体源扩展，以及其他播放技术，如 YouTube 和 Vimeo（通过[插件][Lin

向右看齐/ 2023年10月02日 13:36/ 0 赞/ 15 阅读

相关 HTML video 在原有视频前增加广告视频

需要在播放视频前增加一个广告，实现代码如下： <script> window.onload=function(){ // 我这块是

忘是亡心i/ 2022年12月31日 11:19/ 0 赞/ 177 阅读

相关 html视频前广告,我用html<video>想在播放视频前加载一段几分钟的广告怎么写啊...

该楼层疑似违规已被系统折叠隐藏此楼查看此楼 window.οnlοad=function()\{ // 我这块是一个页面里多个video标签, 所以需要用id区分 $(

雨点打透心脏的1/2处/ 2022年10月10日 11:24/ 0 赞/ 159 阅读

相关 html先播放广告播放视频,我用html<video>想在播放视频前加载一段几分钟的广告怎么写啊...

该楼层疑似违规已被系统折叠隐藏此楼查看此楼 window.οnlοad=function()\{ // 我这块是一个页面里多个video标签, 所以需要用id区分 $(

约定不等于承诺〃/ 2022年10月07日 15:53/ 0 赞/ 125 阅读

相关 HTML 5 video 视频标签全属性详解

HTML 5 video 视频标签全属性详解现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事

ゝ一世哀愁。/ 2022年08月18日 14:22/ 0 赞/ 382 阅读

相关 video视频播放

作者：LoveEmperor-王子様 > 更多资料：[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/vi

曾经终败给现在/ 2022年05月16日 01:55/ 0 赞/ 447 阅读

相关 HTML5——多媒体：audio音频、video视频

1. audio音频标签、video视频标签 ![70][] 2. 特性：（1）autoplay：自动播放；注意：在谷歌浏览器中autoplay有时会失效（其他浏览器没

痛定思痛。/ 2022年05月11日 05:08/ 0 赞/ 727 阅读

相关 video视频详解

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

Love The Way You Lie/ 2022年04月16日 02:21/ 0 赞/ 314 阅读

相关 video.js分段自动加载视频【html5视频播放器】

突发奇想的需求，要在官网上放一个一个半小时的视频教程…… 然而，加载成了问题，页面是cshtml的.net混合网站，不知道哪儿的限制，导致视频加不出来。没有办法，只能前端

墨蓝/ 2021年12月20日 05:47/ 0 赞/ 1286 阅读

相关 html视频播放器（video）

视频解码器 H.264 Throra VP8 音频解码器 AAC MP3 Ogg 1.视频标准 video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP

矫情吗；*/ 2021年10月29日 14:58/ 0 赞/ 596 阅读