本文实例讲述了JS实现的视频弹幕效果。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="zh-CN"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><title>斗鱼弹幕</title><style>html,body{font-size:10px;overflow:hidden;margin:0;padding:0;}#box{width:100%;height:100%;}#dm{width:100%;height:90vh;background:#E8F1F5;}#dm span{width:auto;height:3rem;f...
近日项目有个新需求，需要对视频或音频进行多段裁剪然后拼接。例如，一段视频长30分钟，我需要将5-10分钟、17-22分钟、24-29分钟这三段拼接到一起成一整段视频。裁剪在前端，拼接在后端。 网上简单找了找，基本都是客户端内的工具，没有纯网页的裁剪。既然没有，那就动手写一个。 代码已上传到GitHub： https://github.com/fengma1992/media-cut-tool 废话不多，下面就来看看怎么设计的。 效果图 图中底部的功能块为裁剪工具组件，...
今天要写的，不是大家平时会用到的东西。因为兼容性实在不行，只是为了说明下前端原来还能干这些事。 大家能想象前端是能将摄像头和麦克风的视频流和音频流提取出来，再为所欲为的么。或者说我想把我canvas画板的内容录制成一个视频，这些看似js应该做不到的事情，其实都是可以做到的，不过兼容性不好。我在这里都是以chrome浏览器举的例子。 这里先把用到的api列一下： getUserMedia：打开摄像头和麦克风的接口（文档链接）MediaR...
主要思路是点击进度条需要获取拖动前的时间点，我用mouseup事件去处理的，获得到了oldTime 就好办，然后根据需求限制拖动快进快退，因为项目允许回看，不允许快进，所以得记录maxTime，记录用户正常情况观看视频最大的那个时间点，不允许超过maxTime var isMousedown = false; var oldTime=0,newTime=0,maxTime=0; //拖动进度条会先执行这个事件 $(".vjs-progress-holder").mouseup(function() {isMousedown = true;oldTime = vid1...
文件上传框<input type="file">，除了可以选择文件上传之外，还可以调用摄像头来拍摄照片或者视频并上传。capture属性可以判断前置or后置摄像头。在视频播放的过程中，用canvas定时截取一张图片，然后用gif.js生成一张GIF图，从而完成前端的视频压缩。 我这里使用的是Vue写的，以下是我的流程及代码：一、下载gif.js相关文件，可以到这里下载，然后将这几个文件放在根目录的static/js里面。gif.js相关文件及存放路径二、下载依赖包...
效果类似一条视频的小程序，就是视频列表，然后每个视频上覆盖一张视频的封面图，点击封面图的播放按钮视频播放，点击别的视频的时候，停止播放当前视频，播放点击的视频。差不多是这样：一条视频 首先上代码：wxml <block wx:for="{{videoList}}"><view class=video-item><view class=wrapper><video class=video-video wx:if={{index==videoIndex}} id=video{{index}} autoplay={{true}} show-center-play-btn="{{false}}" src={...
1.在小程序微信开放平台：设置 --- 第三方服务里，申请腾讯视频插件2.申请成功后就可以在项目中使用了 具体使用步骤如下：1.在项目目录src下的main.js中加入下面代码，这里代码会被编译到app.json中config: {// 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去pages: [^pages/index/main],window: {backgroundTextStyle: light,navigationBarBackgroundColor: #00B26A,n...
在我们开发的一个小程序里面，为了给客户了解一些教程内容，我们需要增加一个在线播放视频的模块，考虑过直接使用视频组件播放服务器上的视频不成功，因此使用腾讯视频插件来播放最终测试成功。本篇随笔介绍微信小程序使用视频组件和腾讯视频插件两种方式的解决方式，并重点介绍视频插件方式的处理过程。 1、使用视频组件播放视频 由于是我们自己录制的视频内容，本来想直接通过视频组件来播放自己服务器上的视频，理想很丰满，现实...
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释，具体内容如下 需求分析： ①：进度条随着歌曲的播放延长，歌曲播放完时长度等于黑色总进度条长度；时间实时更新。 ②：当滑动按钮时，实时更新播放时间，橙色进度条长度也会随着按钮的滑动而改变，当滑动结束时，橙色区域停留在滑动结束的位置，歌曲从当前进度开始播放。 ③：点击进度条，橙色进度条长度变为点击处至起点的长度，并从当前点开始播放歌曲。大概思路： ①：...
首先，我们需要在vue工程中安装video.js相关依赖。 npm install --save video.js npm install --save videojs-contrib-hls然后，我们需要引入videojs的css文件，例如在main.js中引入 import video.js/dist/video-js.css接着，我们在需要播放视频的页面引入js对象 import videojs from video.js import videojs-contrib-hls指定一个video容器，例如： <video id="my-video" class="video-js vjs-default-skin" controls preload="au...
本文讲述如何实现拥有酷炫背景视频的登录页面，浏览器窗口随意拉伸，背景视频及前景登录组件均能完美适配，背景视频可始终铺满窗口，前景组件始终居中，视频的内容始终得到最大限度的保留，可以得到最好的视觉效果。并且基于 Vue.js 2.0 全家桶。具体效果如下图所示： 最终效果可以翻到文章最后观看。 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ，提供了完善的教程和视频资源，帮助前端开发者构建酷炫...
客户有个上传视频的需求，上传的视频呢，需要能在线播放并且列表中必须出现类似优酷等视频首页上的那种缩略图，成品如下图所示：当然了，上传视频的界面就不贴出来了，毕竟我们这篇文章的重点不在于如何上传，而在于如何用nodejs截取视频中的帧！~这里我们需要一个开源的第三方插件----大名鼎鼎的多媒体编解码框架ffmpeg，需要安装在服务器上由nodejs调用，代码贴出如下：function fecthVideoThumbnail(entryid, index){ var filen...
本文实例讲述了微信小程序使用video组件播放视频功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① index.wxml代码如下: <video src="../../pages/video/movie.mp4" binderror="videoErrorCallback"></video>② index.js Page({data:{// text:"这是一个页面"},videoErrorCallback: function (e) {console.log(视频错误信息:+e.detail.errMsg);} })3、源代码点击此处本站下载。 关于video组件的详细介绍可参考官网...
nodejs进行视频读取时不能像读取图片之类的一次性读取，而是必须读取一部分返回一部分，这样客户端的播放才会边缓冲边播放，而不必等待全部缓冲完再播放。老规矩，直接贴代码讲解：var fs = require(fs); function readBigFileEntry(filename, response) { path.exists(filename, function(exists) { if (!filename || !exists) { response.writeHead(404); response.end(); return; } var readStream = fs.ReadStream(filen...
以ffmpeg为核心,包装一款局域网内接收转码并推送互联网的客户端软件。本文仅使用ffmpeg基础功能,拉流、转码、推流及简单播放设置。 工作流程拉取远端视频流,视频流格式为 rtsp转换为常用播放格式 rtmp推送至播放端口 rtmp://您的推送端地址,用户使用播放软件连接该地址后可以直接进行内容播放所需工具及软件1、ffmpeg 命令行工具官网链接,选择它的优势在于： 免费无需安装,很大的减少用户操作复杂度命令行启动调用2、nodejs 版本号...