videoJs

1.插件安装

npm install video.js --save

2.引入

在video组件里引入

<template><!-- 包一层是因为放在 Dialog 里面，随时会销毁， --><!-- 不然 this.player.dispose() 销毁后整个dom都没有了，会显示dom节点找不到的报错 --><div ref="videoContainer" style="width: 850px;height: 500px;"><!-- video-js有这个才有样式 --><video style="width: 100%;height: 100%;" ref="videoPlayer" class="video-js"></video></div>
</template><script>
import videojs from "video.js";
import "video.js/dist/video-js.css";export default {name: "VideoContainer",props: {src: {type: String,// http://www.tvyan.com/// 随便找个电视台直播进去复制一个 .m3u8 视频流链接就可以了default: "",},},computed: {options() {return {playbackRates: [0.5, 1.0,2.0], //播放速度autoplay: true,muted: true, // 默认情况下将会消除任何音频。loop: false, // 导致视频一结束就重新开始。preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: "zh-CN",// aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）// fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{// 这样是支持.m3u8  网上找到的各卫视直播视频流都是此格式type: "application/x-mpegURL", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目src: this.src, //url地址},],poster: "", //你的封面地址notSupportedMessage: "此视频暂无法播放，请稍后重新尝试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。controls: true,controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: true,fullscreenToggle: true, //全屏按钮},// 获取父元素的宽高width: this.$refs.videoContainer?.parentElement.offsetWidth || "356",height: this.$refs.videoContainer?.parentElement.offsetHeight || "200",};},},data() {return {player: null,};},methods: {init() {this.player = videojs(this.$refs.videoPlayer, this.options, function () {// console.log("onPlayerReady", this);});},},mounted() {this.init();},beforeDestroy() {if (this.player) {this.player.dispose();}},
};
</script>

上面支持的视频格式是.m3u8，如果想支持其他格式的话只需要对source里的type类型做一下修改就可以了

// 视频流类型
mp4: 'video/mp4',
flv: 'video/x-flv',
m3u8: 'application/x-mpegURL'

3.使用

在页面引入我们刚刚注册的组件

<template><div class="intelligent"><VideoPlay :src="sourcesSrc"></VideoPlay></div>
</template>
<script>import VideoPlay from "@/components/Video"export default {data() {return {sourcesSrc: require('./video/aaa.mp4'),sourcesUrl: "//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",};},components: {VideoPlay,},};
</script>

本地的视频文件需要require引入，这里引入的是.mp4，需要在video组件里对type进行修改才能播放

在vue中使用videoJs实现前端视频流相关推荐

Vue中watch用法
Vue中watch用法我前端开发时看到同事使用到了watch,所以稍微提取了一下操作方法(vue) 具体如下图: vue代码账户名称:<el-input v-model="qqNa ...
Windows上搭建rtsp-simple-server流媒体服务器实现rtsp、rtmp等推流以及转流、前端html与Vue中播放hls(m3u8)视频流
场景 Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流: Nginx-http-flv-module流媒体服务器搭建 ...
Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流
场景 Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流: Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流_win nginx-rtmp ...
「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、可用于更新数据到视图
夜晚有明月,梦里有佳人前言最近在写老师布置的vue项目,真的说实话,每天真就是在百度.google.bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜.思否搜一搜,还有CSDN看一看.我的前端 ...
Vue中前端加密使用RSA加密下的JSEncrypt防止明文暴露
场景前端使用Vue在进行登录时,需要将密码存进cookie中. 为了防止密码明文暴露,前端需要采用加密方式对密码进行加密. 常用加密方式之一就是RSA加密解密. RSA加密是一种非对称加密.可以在不 ...
vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
前端进阶必备技能：Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
vue 前端显示图片加token_前端甩锅神器：vue中的mock使用
首先声明,本文所介绍的方法,只是用于,在做好前端联调的本分工作之余,把前后端联调责任划清界限,并不用于帮后端定位问题(当然,mock也有更全面的方法促进项目的进行,小女不才,在此不提供介绍): 跟陌生 ...
for vue 一行2列_前端开发面试问什么？vue面试中经常问到的问题？用vue想拿20k，面试题要这样答！...
找工作,是一件愁人又具有期待的事情,前端开发的小伙伴们,最近有人参加面试了吗?面试前端开发时,一般会被问什么?你还记得吗?你的回答让你找到满意的工作了吗?生活是美好的,未来是可期的,工作是可以找到的, ...

在vue中使用videoJs实现前端视频流

videoJs

1.插件安装

2.引入

3.使用

在vue中使用videoJs实现前端视频流相关推荐

最新文章

热门文章