从0开始写一个播放器系列-开发环境搭建

最新推荐文章于 2024-08-26 15:51:32 发布
最新推荐文章于 2024-08-26 15:51:32 发布
阅读量347 收藏
点赞数
分类专栏： dp-videoplayer 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lidppp/article/details/108541444
版权

开发环境搭建

开发自己的库,搭建一个开发环境是必不可少的

我们需要一个编译TS,css压缩和兼容性处理的打包工具, 以及一个可以进行热编译的开发环境

因为工作中使用webpack比较多一点, 也相对熟一点就选webpack了

webpack搭建

创建文件夹, 打开cmd命令行工具,cd到刚才创建的文件夹下执行下方命令

npm init -y
npm i webpack webpack-cli webpack-dev-server -g

等待执行的过程中在根目录中创建webpack.config.js

写入以下内容

var { resolve } = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var TerserPlugin = require('terser-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssassetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")


let pathsToClean = ['dist'];

// the clean options to use
let cleanOptions = {
  root: resolve(__dirname),
  // exclude: ['shared.js'],
  verbose: true,
  dry: false,
};

module.exports = (env, argv)=>{
  return {
    entry: {
      'dp-video': './src/index.js',
      'dp-video.min': './src/index.js',
    },
    output: {
      filename: 'js/[name].js',
      library: 'dpVideo', // 指定包名
      libraryExport: 'default', // _entry_return_.default;
      libraryTarget: 'var',
      path: resolve(__dirname, 'dist'),
    },
    module: {
      rules: [
        {
          // 匹配那些文件
          test: /\.css$/,
          // 使用哪些loader处理
          use: [
            argv.mode == "production" ? MiniCssExtractPlugin.loader : 'style-loader',
            // 执行顺序，从右到左，从下到上，依次执行
            // 'style-loader',
            'css-loader',
            {
              loader: "postcss-loader",
              options: {
                ident: "postcss",
                plugins: () => [
                  require("postcss-preset-env")()
                ]
              }
            }
          ],
        },
        {
          test: /\.tsx?$/,
          loader: "ts-loader"
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            // 预设: 只是babel做怎样的兼容性处理  下方是基本兼容性处理
            // 只能做普通的兼容性处理 无法处理如promise等等
            // 全部兼容性处理 使用 @babel/polyfill
            // 这个包会将所有兼容处理引入,体积太大
            // 所以我们需要做按需加载 corejs包
            presets: [
              //  注意此处的中括号
              [
                '@babel/preset-env',
                {
                  // 按需加载
                  useBuiltIns: 'usage',
                  // 指定corejs版本
                  corejs: {
                    version: 3,
                  },
                  // 指定浏览器版本
                  targets: {
                    chrome: '60',
                    firefox: '60',
                    ie: '9',
                    safari: '10',
                    edge: '17',
                  },
                },
              ],
            ],
          },
        },
        {
          test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
          // loader: 'url-loader?name=images/[name].[ext]',
          loader: 'url-loader',
          options: {
            limit: 10,
            name:'font/[name].[ext]'
          }
        },
        {
          test: /\.(mp4)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            name:'video/[name].[ext]',
            limit:10
          }
        }
      ],
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: './src/index.html',
      }),
      new MiniCssExtractPlugin({
        filename: './css/style.css',  // 从 .js 文件中提取出来的 .css 文件的名称
      }),
      new OptimizeCssassetsWebpackPlugin()
    ],
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          include: /min/,
        }),
      ],
    },
    mode: 'development',
    resolve: {
      extensions: [".ts",".js",".json"]
    },
    devServer: {
      // 端口号
      port: 7000,
      // 项目构建后的路径
      contentBase: resolve(__dirname, 'dist'),
      // 启用g-zip压缩
      compress: true,
      // 自动打开浏览器
      open: true,
      // 开启HMR功能
      // 当修改了webpack配置,新配置要想生效,必须重启webpack配置
      hot: true,
    },
  }
}

上方引入了一些loader和plugin

执行 这些包使用到的都在上方的webpack.config.json中有注释, 没有使用到的是使用到的包的依赖

npm i @babel/core @babel/polyfill @babel/preset-env babel-loader clean-webpack-plugin core-js css-loader html-webpack-plugin mini-css-extract-plugin optimize-css-assets-webpack-plugin postcss postcss-loader postcss-preset-env style-loader terser-webpack-plugin ts-lint ts-loader typescript -D

等待执行完成后

在package.json最后追加

  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.01%",
      "not dead",
      "not op_mini all"
    ]
  },
  "scripts": {
    "dev": "npx webpack-dev-server",
    "build": "webpack --mode production"
  },

npm run dev 启动服务

npm run build 打包 指定模式为生产环境

文件目录

文件目录可能会继续修改

| - node_modules 包存放的位置

|- src/

|- |- index.js 主入口文件

|- |- index.html 测试HTML文件

|- |- core/ 核心文件

|- |- |- baseType.d.ts 基本数据类型

|- |- |- creatController.ts 创建控制条

|- |- |- index.ts 播放器核心文件

|- |- |- utils.ts 工具库

|- |- css/ 整体样式

|- |- |- global.css 整体样式css文件

|- |- icon/ 存放项目中所用到的icon基于阿里巴巴矢量图标库

|- |- |- 存放一些iconfont文件

|- |- video/

|- |- |- 存放测试视频

|- dist/ 存放打包文件

|- docs/ 存放本系列md文档

|- packground.json 包管理文件

|- webpack.config.json webpack配置文件

测试是否搭建成功

根据上方文件目录结构创建好文件

在index.js中写入以下内容

console.log("hello world")

执行npm run dev 在浏览器中查看控制台看是否出现hello world字样

至此开发环境搭建完成

为了以防万一 贴上package.json文件

{
  "name": "webpack2js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npx webpack-dev-server",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/polyfill": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "core-js": "^3.6.5",
    "css-loader": "^4.2.1",
    "file-loader": "^6.1.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss": "^7.0.32",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.2.1",
    "terser-webpack-plugin": "^4.1.0",
    "ts-lint": "^4.5.1",
    "ts-loader": "^8.0.3",
    "typescript": "^4.0.2",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {},
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.01%",
      "not dead",
      "not op_mini all"
    ]
  }
}

GitHub地址:https://github.com/lidppp/dp-video
本人博客: https://www.lidppp.com

Lidppp
关注
专栏目录
libVLC windows开发环境搭建
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
03-19 1846
LibVLC是一个强大的开源库，它构成了VLC媒体播放器的核心部分。LibVLC提供了一系列的功能接口，使得VLC能够处理流媒体的接入、音频和视频输出、插件管理以及线程系统等核心任务。跨平台性：VLC作为一个跨平台的多媒体播放器，可以运行在多种操作系统和计算机体系结构上。协议支持：LibVLC不仅支持播放本地视频文件，还支持播放基于各种流媒体协议（如RTMP、RTSP）的视频。API一致性。
从0开发打造视频播放器
白云天的博客
06-06 1048
从零打造视频播放器，实现视频播放、rtsp流播放、视频比例切换、全屏切换
从0开始写一个播放器系列-开篇
Lidppp的博客
09-11 480
从0开始写一个播放器系列-写一个videoPlayer-开篇 阅读本系列博客所需要具备的知识: js, ts , canvas Api , DOM, webpack, 不懂也没有太大的关系, 我会捎带着写出来, 剩下的自行百度 第一步,梳理所需要的功能以及收集实现方案 首先需要确定需求 既然想要做一个播放器,首先应该具有播放器基本的功能, 播放/暂停 下一个(如果传入的播放地址为数组) 选择清晰度 倍速播放 音量 画中画 宽屏 网页全屏 全屏 镜像 上方需求很简单, 通过原生的video控制条和简单的c
Web音乐播放器实战开发
最新发布
weixin_30533301的博客
08-26 592
本文还有配套的精品资源，点击获取 简介：本项目"web-music-player"利用JavaScript技术创建了一个在线音乐播放器，允许用户在浏览器中播放歌曲，提供便捷的音乐体验。通过HTML、CSS和JavaScript，实现了音频控制、事件处理、歌曲列表管理、进度条交互等核心功能。还涉及API调用、异步加载、跨浏览器兼容性、用户体验优化、模块化开发和性能优化等技术要...
视频播放器开发 - 基本原理
热门推荐
JohanMan的博客
03-18 1万+
在做视频播放器之前，我们先了解一些基本定义。 基本定义 视频 连续的图像变化每秒超过24帧画面以上时，根据视觉暂留原理，人眼无法辨别单幅的静态画面；看上去是平滑连续的视觉效果，这样连续的画面叫做视频。 帧率 指的是视频格式每秒钟播放的静态画面数量。典型的画面更新率由早期的每秒6或8张（frame per second，简称fps）至现今的每秒120张不等。 编解码 我们知道，其实...
播放器开发
weixin_43526787的博客
11-09 122
https://blog.csdn.net/wurui8/article/details/49159851 Android 视频缩略图的缓存机制和异步加载 https://blog.csdn.net/love_techlive/article/details/45559077 MediaSrore媒体库刷新 ...
Android开发学习之路--基于vitamio的视频播放器（一）
weixin_30933531的博客
09-30 144
  之前也试过vitamio这个库，后来不知道被什么事情给耽搁了，就没继续下去。近来觉得视频还是需要学习一下的，谁让直播那么火呢，就想着写一个简单的视频播放的app先吧。好了那就开始吧，暂时取名为JPlayer，后续慢慢改进，源码也在github上（https://github.com/imchenjianneng/JPlayer），后续不断更新吧。   首先新建工程JPla...
Java黄金系列之一：Java环境搭建与SSH项目实战
06-30
我将带领大家搭建Java+Tomcat+Struts开发环境，并亲手开发SSH项目。1、您将学会亲手搭建JavaWeb开发环境。2、您将学会SSH三大框架的原理与整合，并亲手开发SSH项目。 3、手把手教学，助力您轻松进入Java的编程世界...
基于vue全家桶开发的一款移动端音乐播放器webapp
08-12
"Vue.js全家桶"指的是Vue.js生态系统中的核心库及一系列配套工具，包括Vue Router（路由管理）、Vuex（状态管理）、Vue CLI（命令行工具）等，它们共同构建了一个功能完备的前端开发环境。 1. Vue.js核心：Vue.js是...
这是一个仿网易云音乐的播放器使用vue全家桶jqueryelementui
08-12
Vue.js全家桶（Vue.js Ecosystem）指的是围绕Vue.js核心库的一系列官方和社区支持的工具、插件和库，它们共同构成了一个完整的开发环境。在这个项目中，"全家桶"可能包括但不限于以下组件： 1. **Vue CLI**：Vue.js...
Android-音视频学习系列-(八)基于-Nginx-搭建(rtmp、http)直播服务器
03-19 3115
云服务器: 腾讯云 系统: centos 直播服务器: nginx 拓展模块: nginx-http-flv-module (支持 rtmp、http-flv、http-hls 等) 如果 NGINX 要支持正则表达式，需要安装 PCRE库。 如果 NGINX 要支持加密访问，需要安装 OpenSSL库。 如果 NGINX 要支持压缩，需要安装 zlib库。 测试环境: 电脑 : MAC 推流软件: obs-studio MAC 拉流软件: VLC Android 拉流软件: 前几天写的一个 Andr.
Win32开发的音乐、视频播放器
09-02
由win32 C语言编写的集音频、视频播放于一身的播放器 内含源代码、位图资源、可执行程序以及avi解码程序 主要用于我的博客资源下载，博文地址： http://blog.csdn.net/crocodile__/article/details/10832337
VLC播放器开发核心库
11-13
新版本的VLC安装之后好像没有这些库文件了，找到一个，这是开发过程正在使用的。
跨平台播放器开发，开发一个播放器需要用到的FFmpeg知识
m0_60259116的博客
03-18 1232
咱们先来看一个流程图: 该系列文章就是将上图拆分为具体的代码模块，那么该篇咱们主要讲解如何利用 FFmpeg API 来对一个输入数据进行解封装，读取原始音频视频信息，然后对音频视频做一些基本操作。基本上在播放器模块中用到的 FFmpeg API 咱们都要对它有一个了解。 FFmpeg 基础知识 解封装 利用 FFmpeg api 来对输入视频进行解封装，先来看一下使用 api 的流程 看完上图是不是对解封装的 API 有一个大概的了解? 从一个 输入 URL 到读取到 压缩数据流 就这么
从零开始实现网易云音乐播放器(3)
前端大彬哥666
05-24 2338
H5增加了很多的标签，面试的时候，如果面试官问你H5都有哪些新标签，你回答header、footer、nav。 这么回答几乎是无效的，因为这些标签在H5里面的角色，相当于鸡骨头、鱼刺、蘑菇腿——全是鸡肋，至少你得答出来audio、video、canvas，这些才是H5的核心功能，本文我们就重点说一下audio。 audio广泛的应用于各种项目中，游戏背景、各种播放器，可以说有声音的地方就有au...
多媒体开发---视频播放器开发(android)
soullines的博客
08-02 4736
android中在实际的视频开发中多用即成的框架,或者自己封装相关的Manager来实现;下面介绍一个接单的android视频开发的过程: 1.实现网络和本地视频播放 2.点击控制播放,暂停 3.支持进度条的拖动,实时跟新进度,时间 4.支持横竖屏切换 5.在横屏状态下,音量键显示并且可调节 6.支持手势触摸,即:上下滑动左半屏,弹出dialog,控制
vue 背景动画_web开发：用Vue做一个播放器
weixin_39524741的博客
11-21 244
本文同步发表在我的个人博客中：沧沧凉凉​www.cclliang.com之前在B站上面看到一个视频：试问谁不想要一个这样的听歌界面呢？_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com感觉它的这个播放器挺好看的，原作者是用的PPT制作。我的设计灵感一向很差，叫我自己设计UI一般会非常难看，于是就准备仿照他这个，用Vue通过web的形式，参照他的界面，做一款播放器...
播放器开发(一)：播放器组成大致结构与代码流程设计
什么都会一点。
11-24 1193
播放器开发(一)：播放器组成大致结构与代码流程设计
web前端入门到实战：HTML5 VideoAPI，打造自己的Web视频播放器
软件开发-前端开发-IT
10-11 2881
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器，需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。 一、基础知识 1.用法 <video src="./video/mv.mp4"></video> 注意：audio和video元素必须同时包含开始和结束标签，不能使用 2.重要HTML属性 control...
Linux开发环境搭建与基础指南
"Linux使用基础-Linux开发环境的搭建及其基本介绍" 在深入探讨Linux使用基础之前，首先要明白Linux的本质。Linux是由芬兰人Linus Torvalds创建的一个开源操作系统内核，它构成了各种Linux发行版的基础。Linux不仅仅...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值