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

墨蓝 2021-12-20 05:47 1299阅读 0赞

突发奇想的需求，要在官网上放一个一个半小时的视频教程……

然而，加载成了问题，页面是cshtml的.net混合网站，不知道哪儿的限制，导致视频加不出来。

没有办法，只能前端想办法了。

于是将视频切割成4个

依次加载自动播放。效果还可以。

代码：

引入：<link rel="stylesheet" href="//cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css">

<script src="http://cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video.novtt.min.js"></script>

html：

<video id="my_video_1" class='video-js vjs-default-skin vjs-big-play-centered' controls preload='auto' width="450" height="375" data-setup='{}' autoplay="autoplay">
                    <source src='http://xxxx.com/video/home1.mp4' type='video/mp4'>
                </video>

js:

var vList = ['http://xxx.com/video/home2.mp4', 'http://xxx.com/video/home3.mp4', 'http://xxx.com/video/home4.mp4', 'http://xxx.com/video/home1.mp4']; // 初始化播放列表  
            var vLen = vList.length; // 播放列表的长度  
            var curr = 0; // 当前播放的视频  
            
            var video = videojs("my_video_1", {}, function () {
                this.on('ended', function () {
                    play();
                    function play(e) {
                        video.src(vList[curr]);
                        video.load();
                        video.play();
                        curr++;
                        if (curr >= vLen) {
                            curr = 0; // 播放完了，重新播放  
                        }
                    }
                })
            })

官网api说明：

http://docs.videojs.com/

转载于:https://www.cnblogs.com/webSong/p/8289563.html

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关基于HTML5的视频播放器

之前在上网去搜索播放器的时候，很多都要收费的，不收费的感觉看起来很费劲，所以自己简单些了一下，前几天有共享过一个简单的H5视频播放器，但是存在一些BUG，最近修复了一下，再次共

墨蓝/ 2022年09月21日 04:56/ 0 赞/ 299 阅读

相关 HTML5视频播放器插件

[下载地址][Link 1]ckin是一款界面漂亮的HTML5视频播放器插件。该视频播放器内置有三种皮肤，并且允许你修改控制按钮的颜色，遮罩层透明度和视频封面等。参数配置：da

旧城等待，/ 2022年09月10日 14:22/ 0 赞/ 372 阅读

相关 web视频播放器videojs

VideoJS 下载 Video.js CDN npm安装创建播放器设置自动设置手动设置

￡神魔★判官ぃ/ 2022年09月05日 12:39/ 0 赞/ 347 阅读

相关 html5视频播放器

html5 视频音频制作学习的笔记，记录备忘。效果图： ![Center][] 代码： <!DOCTYPE html> <ht

绝地灬酷狼/ 2022年08月19日 08:59/ 0 赞/ 369 阅读

相关 html5自动播放视频

html5可以直接播放视频。就用标记`<video>`即可，真好。可是怎么自动播放视频？不是有"autoplay"吗？但是，无效。任凭你设属性，或是`video.pla

男娘i/ 2022年03月01日 14:14/ 0 赞/ 456 阅读

相关视频播放器，基于videojs,NVR

web播放监控视频，基于EasyNVR获取直播链接进行播放。对播放器进行封装。源码下载 [码云][Link 1]或[GitHub][] HTML <!DOCTYPE

以你之姓@/ 2022年01月12日 07:41/ 0 赞/ 519 阅读

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

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

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

相关 html视频播放器（video）

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

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

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

一直想往前端流媒体方面研究，学习视频播放器 API 期间，断断续续的终于整体实现了一个简单的播放器，以及一些相关的插件、工具和组件。之前在 v 站发过一次求测试，现在终于有一

╰+哭是因爲堅強的太久メ/ 2021年06月26日 16:06/ 0 赞/ 852 阅读