From 3a1f7c24e1dcb2f62275b5430d89c827cfdc3c6a Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期五, 14 一月 2022 17:52:38 +0800
Subject: [PATCH] U 一体机相关
---
src/components/rtmpVideo.vue | 187 ++++++++++++++++++++++++----------------------
1 files changed, 96 insertions(+), 91 deletions(-)
diff --git a/src/components/rtmpVideo.vue b/src/components/rtmpVideo.vue
index e2d3452..6d92f99 100644
--- a/src/components/rtmpVideo.vue
+++ b/src/components/rtmpVideo.vue
@@ -1,109 +1,114 @@
<template>
- <div class="rtmp-video-wrapper">
- <video ref="videoPlayer" class="video-js"></video>
- </div>
+ <div class="rtmp-video-wrapper">
+ <video ref="videoPlayer" class="video-js"></video>
+ </div>
</template>
<script>
-import videoJs from 'video.js';
-import 'videojs-flash';
-import SWF_URL from 'videojs-swf/dist/video-js.swf';
-import loadImg from '@/assets/images/dw_bg.jpg';
+import videoJs from "video.js";
+import "videojs-flash";
+import SWF_URL from "videojs-swf/dist/video-js.swf";
+import loadImg from "@/assets/images/dw_bg.jpg";
export default {
- name: "rtmpVideo",
- player: "",
- props: {
- url: {
- type: String,
- default: "",
- },
+ name: "rtmpVideo",
+ player: "",
+ props: {
+ url: {
+ type: String,
+ default: "",
},
- data() {
- return {
- options: {
- width: 800,
- height: 450,
- controls: true, // 鎺у埗鏍�
- autoplay: false, // 鑷姩鎾斁
- sources: [{ // 娴侀厤缃紝鏁扮粍褰㈠紡锛屼細鏍规嵁鍏煎椤哄簭鑷姩鍒囨崲
- type: 'rtmp/mp4',
- src: loadImg // 浜叉祴鍙敤
- }],
- techOrder: ['html5', 'flash'],
- flash: {
- swf: SWF_URL
- },
- },
- playFlag: false,
+ },
+ data() {
+ return {
+ options: {
+ width: 800,
+ height: 450,
+ controls: true, // 鎺у埗鏍�
+ autoplay: false, // 鑷姩鎾斁
+ sources: [
+ {
+ // 娴侀厤缃紝鏁扮粍褰㈠紡锛屼細鏍规嵁鍏煎椤哄簭鑷姩鍒囨崲
+ type: "rtmp/mp4",
+ src: loadImg, // 浜叉祴鍙敤
+ },
+ ],
+ techOrder: ["html5", "flash"],
+ flash: {
+ swf: SWF_URL,
+ },
+ },
+ playFlag: false,
+ };
+ },
+ watch: {
+ url() {
+ this.changeUrl();
+ },
+ },
+ methods: {
+ create() {
+ let self = this;
+ // 鍒濆鍖栨挱鏀惧櫒
+ this.$options.player = videoJs(
+ this.$refs.videoPlayer,
+ this.options,
+ function onPlayerReady() {
+ this.on("pause", function () {
+ console.log("鏆傚仠鎾斁");
+ });
+ this.on("play", function () {
+ self.playFlag = true;
+ console.log("寮�濮�/鎭㈠鎾斁");
+ });
+ this.on("ended", function () {
+ console.log("缁撴潫鎾斁");
+ });
+ this.on("loadeddata", function () {
+ console.log("loadeddata鏁版嵁鍔犺浇瀹屾垚");
+ });
+ this.on("error", function () {
+ console.log("error");
+ });
}
+ );
},
- watch: {
- url() {
- this.changeUrl();
- },
+ changeUrl() {
+ let url = this.url;
+ if (this.$options.player) {
+ let myPlayer = this.$options.player;
+ myPlayer.src(url);
+ myPlayer.load(url);
+ }
},
- methods: {
- create() {
- let self = this;
- // 鍒濆鍖栨挱鏀惧櫒
- this.$options.player = videoJs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
-
- this.on('pause', function() {
- console.log('鏆傚仠鎾斁')
- })
- this.on('play', function() {
- self.playFlag = true;
- console.log('寮�濮�/鎭㈠鎾斁')
- })
- this.on('ended', function() {
- console.log('缁撴潫鎾斁')
- })
- this.on('loadeddata', function() {
- console.log('loadeddata鏁版嵁鍔犺浇瀹屾垚')
- })
- this.on('error', function() {
- console.log('error')
- })
- });
- },
- changeUrl() {
- let url = this.url;
- if(this.$options.player) {
- let myPlayer = this.$options.player;
- myPlayer.src(url);
- myPlayer.load(url);
- }
-
- },
- play() {
- this.$nextTick(()=>{
- if(this.$options.player) {
- this.$options.player.play();
- }
- });
- },
- dispose() {
- if(this.$options.player) {
- this.playFlag = false;
- this.$options.player.dispose();
- this.$options.player = "";
- }
- },
+ play() {
+ this.$nextTick(() => {
+ if (this.$options.player) {
+ this.$options.player.play();
+ }
+ });
},
- mounted() {
- this.create();
+ dispose() {
+ if (this.$options.player) {
+ this.playFlag = false;
+ this.$options.player.dispose();
+ this.$options.player = "";
+ }
},
- beforeDestroy() {
- this.dispose();
- console.log("閿�姣乺tmp娴�");
- }
-}
+ },
+ mounted() {
+ this.create();
+ },
+ beforeDestroy() {
+ this.dispose();
+ console.log("閿�姣乺tmp娴�");
+ },
+};
</script>
<style scoped>
.rtmp-video-wrapper {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1