npm 安装

npm install --save vue-video-player

npm install --save videojs-flash

 1 <template>
2 <section class="video-box">
3 <videoPlayer
4 ref="videoPlayer"
5 :options="videoOptions"
6 class="vjs-custom-skin videoPlayer"
7 :playsinline="true"
8 />
9 </section>
10 </template>
11 <script>
12 import 'video.js/dist/video-js.css'
13 import 'vue-video-player/src/custom-theme.css'
14 import { videoPlayer } from 'vue-video-player'
15 import 'videojs-flash'
16 export default {
17 components: {
18 videoPlayer
19 },
20 data () {
21 return {
22 videoSrc: '',
23 // 视频播放
24 videoOptions: {
25 playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
26 autoplay: false, //如果true,浏览器准备好时开始回放。
27 muted: false, // 默认情况下将会消除任何音频。
28 loop: false, // 导致视频一结束就重新开始。
29 preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
30 language: 'zh-CN',
31 aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
32 techOrder: ['flash', 'html5'], // 兼容顺序
33 sources: [{ // 流配置,数组形式,会根据兼容顺序自动切换
34 type: 'rtmp/hls',
35 src: 'rtmp://58.200.131.2:1935/livetv/hunantv'
36 }],
37 poster: "", //你的封面地址
38 // width: document.documentElement.clientWidth,
39 notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
40 controlBar: {
41 timeDivider: true,
42 durationDisplay: true,
43 remainingTimeDisplay: false,
44 fullscreenToggle: true //全屏按钮
45 }
46 }
47 }
48 }
49 }
50 </script>
51 <style scoped>
52 .video-box {
53 width: 1000px;
54 padding: 20px;
55 }
56 </style>

最后,这是 rtmp 流的测试网址:https://willarun365.blog.csdn.net/article/details/109180771#comments_14708186

安装完了之后没播放视频也没报错别慌,安装一波:https://www.flash.cn/  ( 针对前端开发用的谷歌浏览器不能播放的问题,安装完了插件之后浏览器允许这个插件使用,然后你就能进入测试阶段( 在老板面前光明正大的直播,记得开F12假装测试在测试功能 ) )

vue3 项目 用 vue-video-player 做直播 ( 亲测可用 )的更多相关文章

  1. vue 嵌入倒计时组件( 亲测可用 )

    由于花费了我不少时间才找到的组件,所以记录一下,后面方便自己好找一些,也算是分享出来给各位前端一起用. npm 下载npm install vue2-flip-countdown --save tem ...

  2. 阿里云服务器centos7,docker部署mysql+Redis+vue+springboot+Nginx+fastdfs,亲测可用

    一.购买云服务器 我是今年双十一期间在阿里云购买的服务器, 简单配置2核_4G_40G_3M,三年用了不到800块,不过当时我记得腾讯云更便宜,个人感觉,阿里的云服务器更加的稳定, 毕竟身经百战, 经 ...

  3. 亲测可用!在线购书系统项目分享(Java)

    项目简介 项目来源于:https://gitee.com/suimz_admin/BookShop 一个基于JSP+Servlet+Jdbc的书店系统.涉及技术少,易于理解,适合JavaWeb初学者学 ...

  4. vue 引用 tcplayer 做直播( 俩个例子,都可以用。替换直播地址即可,后端推流,前端观看。 )

    例子一比例子二更加容易被理解.另外 m3u8 也支持 webrtc 开头的直播地址. 补充JS 得下载到本地,自行引入: https://imgcache.qq.com/open/qcloud/liv ...

  5. windows下的java项目打jar分别编写在windows与linux下运行的脚本( 本人亲测可用!)

    前言: 最近公司做了一个工具,要将这个工具打包成一个可运行的程序,编写start.bat和start.sh在windows和linux下都可以运行. 在网上找了很多资料,最后终于找到一个可靠的资料,记 ...

  6. google vue开发调试插件,简便安装,亲测可用

    前言:开发vue项目,使用谷歌浏览器,不得不使用调试插件便于调试 插件地址如下: 链接:https://pan.baidu.com/s/159HqJMeFSF-w5z-tMi7drw 密码:ueez ...

  7. Vue 中使用UEditor富文本编辑器-亲测可用-vue-ueditor-wrap

    其中UEditor中也存在不少错误,再引用过程中. 但是UEditor相对还是比较好用的一个富文本编辑器. vue-ueditor-wrap说明 Vue + UEditor + v-model 双向绑 ...

  8. vue.js的安装部署+cnpm install 安装过程卡住不动----亲测可用

    1.到Node.js的官网下载node node.js的下载地址,下载完成后,我在d盘新建一个文件夹“node”, 安装到node目录下(安装之后环境变量自动配置了,自己无需再配),比如我的安装路径是 ...

  9. Eclipse 创建springBoot项目的时候需要首先 安装STS(亲测)

    开始我的Eclipse版本是4.4.2.安装网上的步骤多次不成功. 后来直接去下载了最新版的Eclipse 2018-9版本的 是 4.9. 下面是安装步骤: (1)eclipse->Help- ...

随机推荐

  1. 离线安装rpm包并解决依赖(升级vsftpd为例)

    背景  实际开发中,我们的linux服务器是处理离线状态的,并不能访问互联网.如果此时要在linux上安装或者升级软件,就只能通过rpm包的安装方式.rpm包安装有一个缺陷,就是不能处理安装包的依赖问 ...

  2. idea 提示不能打开cmd.exe,idea 编译项目 CreateProcess error=740, 请求的操作需要提升 --->如何设置cmd以管理员身份运行

    问题描述:idea 编译项目 idea 编译项目 CreateProcess error=740, 请求的操作需要提升 CreateProcess error=740, 请求的操作需要提升 全网搜索可 ...

  3. 理清 UT、UTC、GMT和CST

    平时各种时间标准简写绕得不明不白,查一下整理在这里. IAT: International Atomic Time, 原子时.又称国际原子时,是一种通过原子钟得到的时间标准,原子钟是世界上已知最准确的 ...

  4. MySql查询上周(周一到周日)每天的日期!土方!

    首先介绍一个函数:YEARWEEK(date[,mode]) 主要说明一下后面的可选参数mode,这个参数就是指定一周里面哪一天是第一天. 默认一周是从周日开始,这显然不太符合我们的要求.要指定每周从 ...

  5. Couchdb 任意命令执行漏洞(CVE-2017-12636)

    影响版本:小于 1.7.0 以及 小于 2.1.1 该漏洞是需要登录用户方可触发,如果不知道目标管理员密码,可以利用CVE-2017-12635先增加一个管理员用户 依次执行如下请求即可触发任意命令执 ...

  6. leetcode 有效三角形的个数

    题目描述: 平明伞兵解法: 既然要求满足三角形要求的三边,简单来说,就是最短两边之和大于第三边,所以,第一步Arrays.sort().先排序,然后直接伞兵暴力法,三重循环.当然最后肯定是能跑出来的, ...

  7. python代码下载m3u8视频

    代码如下: # -*- coding: utf-8 -*- import requests import re import os import base64 from Crypto.Cipher i ...

  8. JVM的内存管理机制-转载

    JVM的内存管理机制 一.JVM的内存区域 对于C.C++程序员来说,在内存管理领域,他们既拥有每一个对象的"所有权",又担负着每一个对象生命开始到终结的维护责任. 对Java程序 ...

  9. 8.7考试总结(NOIP模拟)[Smooth·Six·Walker]

    前言 踩了挺多以前没踩过的坑... T1 一开始是打了一个 60pts 的 DFS ,在与暴力拍了几组数据保证正确性之后, 突然想到 BFS 可能会更快一些,然后就又码了一个 BFS,又和 DFS 拍 ...

  10. 一口气说出 Redis 16 个常见使用场景!

    1.缓存 String类型 例如:热点数据缓存(例如报表.明星出轨),对象缓存.全页缓存.可以提升热点数据的访问数据. 文章首发于:http://ht5n8.cn/LEc6v 2.数据共享分布式 St ...