分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

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

发布时间:2023-09-06 01:36责任编辑:林大明关键词:js

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

然而,加载成了问题,页面是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/

  

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

原文地址:https://www.cnblogs.com/webSong/p/8289563.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved