vue在内网使用video，video-js.swf加载不到

最新推荐文章于 2024-03-15 09:35:48 发布
最新推荐文章于 2024-03-15 09:35:48 发布
阅读量2.7k 收藏 7
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51490706/article/details/110087124
版权

Vue 视频播放 服务器部署 videojs-swf npm install
关键词由CSDN通过智能技术生成

现在做的一个项目在外网上播放video视频是没问题的，但是部署到服务器上，显示加载不到这个文件，会报错。

先下载好video和flash，主要是需要npm install videojs-swf
在这里插入图片描述

然后在需要播放的视频页面引入

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在vue.config.js中

在这里插入图片描述

然后重启项目就OK了

weixin_51490706
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
关于vue-cli2.9.6 使用vue-video-player,视频播放rtmp视频流error:in ./node_modules/videojs-swf/dist/video-js.swf
weixin_39963328的博客
10-28 4656
我在做vue前端开发项目的时候，领导让我在别人项目的基础上进行二次开发，我将自己的页面合并至平台，我用的vue-cli版本是2.6.9，然后我按照正常流程，引入vue-video-player video.js等，然后配置playerOptions等参数，main.js也进行了配置！ 然后运行开始报错，如下，好多技术人员说在webpack.base.conf.js,在webpack.config.js等文件进行配置，但是我的这个版本并没有这俩文件，又是别人扔掉的项目包，没法去问别人，然后我搜了一下我的这
videojs集成--播放rtmp流
weixin_33676492的博客
06-10 593
之前说到已经把流推送过来了，这时候就可以使用videojs来进行显示播放。 首先要先有一个文件，那就是video-js.swf 因为，这种播放方式html已经不能很好的进行播放了，需要用到flash来播放，videojs在这个地方就用到了这个。 代码就是下面这样。 里面一些细节注释都有。 重点就是看<video>标签里面的内容 ...
video-js.swf
03-25
我在开发的时候发现一直不能自动播放，设置了autoplay也不行，后来发现谷歌对html做了限制，播放窗口小于400*300不能自动播放，有两个解决办法1、窗口大于等于400*300，我刚我做的事九宫格，每个页面都小于，所以第二个方法2、跨源插件，就是video—js.swf文件，成功解决，我在解决的时候还发现有人说谷歌还做了下面的限制，（静音才能自动播放，我没遇到，也试了，没有静音也能播放.进度条隐藏不能自动播放，我也试了，没有影响。视频隐藏不能自动播放，没有试，估计只有恶意才会用到吧）
在网站中使用VideoJs视频播放器播放视频
zgphacker2010的专栏
09-01 7884
之前使用videojs用来网页中播放视频，现在做一下总结 （这里把插件下载及演示地址、使用方法及demo放出来） 视频播放插件Video.js 插件下载地址：http://www.jq22.com/jquery-info404 演示播放视频地址：http://www.jq22.com/yanshi404（直接从浏览器打开观看效果） Video.js 是一个通用的在网页上嵌入视频播放器...
video.js swf
最新发布
gitblog_00039的博客
03-15 388
video.js swf 什么是video.js swf？ video.js swf 是一个开源的 JavaScript 和 Flash 播放器库，它允许您在网页上播放视频内容。该库是基于流行的 video.js 播放器构建的，并通过 Flash 技术提供了对旧版浏览器的支持。 video.js swf 能做什么？ video.js swf 可以帮助开发者创建跨平台、跨浏览器的视频播放解决方案。以...
使用video.js播放视频
asonFirst的博客
06-20 6028
1.下载video.js插件 2.引入相关标签，包括css、js等             _V_.options.flash.swf = "http://example.com/path/to/video-js.swf"   3、html页面播放视频部分   controls preload="auto" width="800" hei
vue + video.js 加载多种视频流（HLS、FLV、RTMP、RTSP）
qq_17627195的博客
09-08 1万+
由于需要在一个项目内接入多种常用的视频流，所以接触到video.js，这里就做个记录。vue安装就不讲了，直接从项目开始了。RTSP格式已测试，无法成功播放，浏览器就识别不了STSP协议（提供两个解决方案：第一个是通过后端去转格式。第二个方案就是安装插件/中间件。目前想用浏览器直接播放RTSP格式流，没有其他更好的解决方法。
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
10-14
Vue-Video-Player 是一个基于 Video.js 的 Vue 组件，它提供了丰富的视频播放功能，包括对实时流媒体的支持。在本文中，我们将深入探讨如何使用 Vue-Video-Player 实现监控设备的实时视频播放，特别是通过 RTMP 流。...
vue项目中播放rtmp视频文件流的方法
01-22
当然我在安装过程中也遇到了一个问题，就是在选择使用 vue-video-player前还安装了videojs插件，卸载从新安装 vue-video-player时由于项目中有以前安装的其他视频组件影响，一直运行不起来，后面我把node_modules...
vue播放rtmp视频流
03-06
npm install video.js videojs-flash videojs-swf vue-video-player --save ``` 其中： - `video.js`：核心视频播放器库。 - `videojs-flash`：为 Video.js 添加 Flash 支持。 - `videojs-swf`：包含所需的 Flash ...
HTML5 视频播放器 video-js
03-17
3. video-js.swf：这是一个 Flash 后备文件，当用户的浏览器不支持 HTML5 视频或特定视频格式时，video-js 会自动切换到 Flash 播放器来保证兼容性。 4. examples：这个文件夹包含了使用 video-js 的示例代码，可以...
html5查看swf视频格式,如何使用Videojs播放.swf格式文件？
weixin_28809647的博客
06-08 1026
Video.jsvideojs.options.flash.swf = './video-js.swf'; // flash路径https://imgcache.qq.com/tence...0" type="application/x-shockwave-flash" />To view this video please enable JavaScript, and consider u...
js-视频播放插件Video.js简单使用
qq_24892029的博客
11-11 6802
插件下载地址： http://www.jq22.com/jquery-info404 Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。 @ page language="java" contentType="text/html; charset=UT
项目无法识别 ?. 语法，导致报错Module parse failed: Unexpected token
热门推荐
weixin_45717984的博客
05-27 5万+
首先找到报这个问题的地方 我这里是因为es语法问题 如果你也是npm安装了一个包，然后在导入的时候报这个语法错，那你可以接着往下看，如果不是就不用往下看了 问题原因： 因为导入的组件库是直接上源码的，必须告知webpack，需要编译一下这个库，让源码中的es6、es7的特性转换为es5 解决方案： 1.在vue.config.js 里面加上 transpileDependencies: [‘/@yabby-business/’] 2.还有一种方式在babel.config.js中指定库导入的时候用的编
Web直播之RTMP协议：vue-video-player + videojs-flash
liveweb视频汇聚平台
07-12 1101
liveweb是好游科技开发的一款web播放器，支持多种协议(RTSP/RTMP/HLS/HTTP-FLV/WebSocket-FLV/GB28181/HTTP-TS/WebSocket-TS/HTTP-fMP4/WebSocket-fMP4/MP4/WebRTC),支持协议互转。 全面支持H265/H264/AAC/G711/OPUS。 支持WebRTC推流，支持转其他协议 支持WebRTC播放，支持其他协议转WebRTC 支持TWCC rtcp动态调整码率 支持remb/pli/sr/rr rtcp 支
在vue项目中使用video.js实现视频播放和视频进度条打点
不怕麻烦的鹿丸的博客
02-24 1万+
严格大于0的数字数组，其中1表示常速（100％），0.5表示半速（50％），2表示双速（200％）等。markerStyle配置的是各个打点的默认颜色，如果要每个打点都有自己各自的颜色，可以在markers里给每个打点添加class名字，然后在css里单独设置颜色。Video.js表示用户通过"vjs-user-active"和"vjs-user-inactive"类以及"useractive"事件与玩家进行交互。此选项将用于Video.js（即video.novtt.js）的“novtt”版本中。
vue 使用js获取video路径后视频不加载问题
qq_45848226的博客
07-23 3359
在进行web开发时为了使封装性更好，前端方面的数据都要设置成动态，从后端获取后数据。 在使用video.js组件时，需要js从后端拿取网页资源，传给vodeo组件，在这个过程中会遇到一个问题，路径变量声明时未赋值，从后端获取数据修改路径变量后，video会获取到视频资源但是不会加载，因此要在获取之后加上load函数重新加载 <video id="video1" class="video" preload="auto" disablePictureInP
使用video.js播放rtmp流时报错FLASH: NetStream.Play.Failed
guaniuqaq的博客
10-17 1058
1.选用X5版本video.js,因为X6及以上版本不支持rtmp的播放 2.指定video-js.swf文件路径 videojs.options.flash.swf = "lib/video5.18.4/video-js.swf";//flash路径
vue-video-player里找不到custom-theme.css
05-05
如果您想使用 `vue-video-player` 的自定义主题，您需要手动创建 `custom-theme.css` 文件并将其包含在您的项目中。您可以按照以下步骤进行操作： 1. 在您的项目中创建一个名为 `custom-theme.css` 的新文件。 2. 将您的自定义样式添加到 `custom-theme.css` 文件中。例如，您可以添加以下样式来更改播放器颜色： ``` /* 设置播放器主色调 */ .vjs-default-skin { color: #fff; background-color: #333; } /* 设置进度条颜色 */ .vjs-default-skin .vjs-progress-holder .vjs-play-progress { background-color: #f00; } /* 设置播放按钮颜色 */ .vjs-default-skin .vjs-big-play-button { color: #f00; } ``` 3. 在您的 Vue 组件中，将 `custom-theme.css` 文件导入到您的组件中，并在 `mounted()` 生命周期钩子中将其添加到您的文档中。例如： ```js import './custom-theme.css'; export default { name: 'MyVideoPlayer', mounted() { const style = document.createElement('style'); style.innerHTML = require('./custom-theme.css'); document.head.appendChild(style); }, }; ``` 这样就可以使用您的自定义主题了。请注意，如果您使用的是 `vue-video-player` 的 CDN 版本，您需要将 `custom-theme.css` 文件上传到您的服务器并相应地更改导入路径。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值