cnhis-design-vue 2.1.56 → 2.1.57

package/src/component/player-vod/player.vue

@@ -1,188 +1,188 @@
-<template>
-  <video
-    ref="video"
-    controls
-    @contextmenu.prevent
-    class="video-js vjs-default-skin vjs-big-play-centered"
-    webkit-playsinline="true"
-    playsinline
-  ></video>
-  <!-- src="https://2483-cn-north-4.cdn-vod.huaweicloud.com/asset/342c34d391612f9e26c1be4877bdd0f9/c8b7bdceb56eab1e123d20c4268d1e60.mp4" -->
-  <!-- class="video-js vjs-default-skin vjs-big-play-centered" -->
-</template>
-
-<script>
-import Video from "video.js";
-import "video.js/dist/video-js.css";
-export default {
-  name: "player",
-  data: () => ({
-    player: null,
-    defaultOptions: {
-      playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
-      autoplay: true, // 如果true,浏览器准备好时开始播放。 enlarge > -1
-      muted: false, // 默认情况下将会消除任何音频。
-      loop: false, // 导致视频一结束就重新开始。
-      preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-      // language: 'zh-CN',
-      // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-      // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-      // sources: [
-      //   {
-      //     type: "video/mp4",
-      //     src: "" //url地址
-      //   }
-      // ],
-      src: "",
-      poster: "", // 你的封面地址
-      // height: "600px",
-      height: 600,
-      // width: 750,
-      // width: 750,
-      width: parseInt(document.documentElement.clientWidth * 0.6),
-      controls: true,
-      notSupportedMessage: "此视频暂无法播放", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
-      suppressNotSupportedError: true, // 不支持的类型是否马上展示报错信息
-      controlBar: {
-        timeDivider: true,
-        durationDisplay: true,
-        currentTimeDisplay: true,
-        remainingTimeDisplay: false,
-        pictureInPictureToggle: false, // 画中画
-        volumePanel: {
-          inline: false // 默认是true,横着的
-        }
-        // timeDivider: true,
-        // durationDisplay: true,
-        // chaptersButton: true,
-        // fullscreenToggle: true  //全屏按钮
-      },
-      errorDisplay: true,
-      posterImage: false,
-      bigPlayButton: true,
-      textTrackDisplay: false
-    }
-  }),
-  props: {
-    options: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    error(e) {
-      // 如果视频下载出错 则初始化视频至已缓冲时间的前3秒
-      let err = e.error();
-      if (err.code === 2) {
-        // 判断是否是网络加载问题
-        let buffTime = e.bufferedEnd() - 6;
-        e.load(this.playerOptions.sources[0].src);
-        e.currentTime(buffTime);
-        e.play();
-      } else {
-        this.alert.err(err.message);
-      }
-    }
-  },
-  watch: {
-    /* options: {
-                handler() {
-                    console.log('观测到options已发生变化:');
-                },
-                deep: true
-            },*/
-    src() {
-      // 侦听视频路径, 当视频路径发生改变时, 重新渲染video路径
-      this.player.src(this.src);
-      if (this.play) this.player.play();
-    },
-    play() {
-      // 侦听该属性, 当options的autoplay变为true时 直接播放视频
-      if (this.play) this.player.play();
-    }
-  },
-  computed: {
-    /* option() {
-                console.log('已计算');
-                console.log(this.options.sources[0].src);
-                // console.log(this.options.sources[0].hasOwnProperty('src'));
-                if (this.options.sources[0].src) {
-                    return this.options;
-                } else {
-                    return this.options;
-                }
-
-            },*/
-    src() {
-      return this.options.sources[0].src;
-    },
-    video() {
-      return this.$store.state.video;
-    },
-    play() {
-      return this.options.autoplay;
-    }
-  },
-  mounted() {
-    const vm = this;
-    this.player = Video(
-      this.$refs.video,
-      Object.assign(this.defaultOptions, this.options),
-      function() {
-        // this.tech_.off("dblclick");
-        this.on("play", () => {
-          // this.volume(vm.video.volume);
-        });
-
-        this.on("volumechange", () => {
-          // vm.video.volume = this.volume();
-          // window.localStorage.volume = this.volume();
-        });
-
-        this.on("error", () => {
-          let err = this.error();
-          if (err.code === 2) {
-            // 判断是否是网络加载问题
-            let buffTime = this.bufferedEnd() - 6;
-            this.load(vm.src);
-            this.currentTime(buffTime);
-            this.play();
-          } else {
-            console.log(err.message);
-          }
-        });
-      }
-    );
-  }
-};
-</script>
-<style lang="less">
-// scoped
-// 进度显示当前播放时间
-.video-js {
-  .vjs-time-control {
-    display: block;
-  }
-  // .vjs-remaining-time {
-  //   display: none;
-  // }
-  .vjs-current-time.vjs-time-control {
-    display: block;
-  }
-  .vjs-duration.vjs-time-control {
-    display: block;
-  }
-}
-
-// .video-js
-// 暂停时显示播放按钮
-.vjs-paused .vjs-big-play-button,
-.vjs-paused.vjs-has-started .vjs-big-play-button {
-  display: block;
-}
-
-// 点击屏幕播放/暂停
-.video-js.vjs-playing .vjs-tech {
-  pointer-events: auto;
-}
-</style>
+<template>
+  <video
+    ref="video"
+    controls
+    @contextmenu.prevent
+    class="video-js vjs-default-skin vjs-big-play-centered"
+    webkit-playsinline="true"
+    playsinline
+  ></video>
+  <!-- src="https://2483-cn-north-4.cdn-vod.huaweicloud.com/asset/342c34d391612f9e26c1be4877bdd0f9/c8b7bdceb56eab1e123d20c4268d1e60.mp4" -->
+  <!-- class="video-js vjs-default-skin vjs-big-play-centered" -->
+</template>
+
+<script>
+import Video from "video.js";
+import "video.js/dist/video-js.css";
+export default {
+  name: "player",
+  data: () => ({
+    player: null,
+    defaultOptions: {
+      playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
+      autoplay: true, // 如果true,浏览器准备好时开始播放。 enlarge > -1
+      muted: false, // 默认情况下将会消除任何音频。
+      loop: false, // 导致视频一结束就重新开始。
+      preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+      // language: 'zh-CN',
+      // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+      // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+      // sources: [
+      //   {
+      //     type: "video/mp4",
+      //     src: "" //url地址
+      //   }
+      // ],
+      src: "",
+      poster: "", // 你的封面地址
+      // height: "600px",
+      height: 600,
+      // width: 750,
+      // width: 750,
+      width: parseInt(document.documentElement.clientWidth * 0.6),
+      controls: true,
+      notSupportedMessage: "此视频暂无法播放", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+      suppressNotSupportedError: true, // 不支持的类型是否马上展示报错信息
+      controlBar: {
+        timeDivider: true,
+        durationDisplay: true,
+        currentTimeDisplay: true,
+        remainingTimeDisplay: false,
+        pictureInPictureToggle: false, // 画中画
+        volumePanel: {
+          inline: false // 默认是true,横着的
+        }
+        // timeDivider: true,
+        // durationDisplay: true,
+        // chaptersButton: true,
+        // fullscreenToggle: true  //全屏按钮
+      },
+      errorDisplay: true,
+      posterImage: false,
+      bigPlayButton: true,
+      textTrackDisplay: false
+    }
+  }),
+  props: {
+    options: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    error(e) {
+      // 如果视频下载出错 则初始化视频至已缓冲时间的前3秒
+      let err = e.error();
+      if (err.code === 2) {
+        // 判断是否是网络加载问题
+        let buffTime = e.bufferedEnd() - 6;
+        e.load(this.playerOptions.sources[0].src);
+        e.currentTime(buffTime);
+        e.play();
+      } else {
+        this.alert.err(err.message);
+      }
+    }
+  },
+  watch: {
+    /* options: {
+                handler() {
+                    console.log('观测到options已发生变化:');
+                },
+                deep: true
+            },*/
+    src() {
+      // 侦听视频路径, 当视频路径发生改变时, 重新渲染video路径
+      this.player.src(this.src);
+      if (this.play) this.player.play();
+    },
+    play() {
+      // 侦听该属性, 当options的autoplay变为true时 直接播放视频
+      if (this.play) this.player.play();
+    }
+  },
+  computed: {
+    /* option() {
+                console.log('已计算');
+                console.log(this.options.sources[0].src);
+                // console.log(this.options.sources[0].hasOwnProperty('src'));
+                if (this.options.sources[0].src) {
+                    return this.options;
+                } else {
+                    return this.options;
+                }
+
+            },*/
+    src() {
+      return this.options.sources[0].src;
+    },
+    video() {
+      return this.$store.state.video;
+    },
+    play() {
+      return this.options.autoplay;
+    }
+  },
+  mounted() {
+    const vm = this;
+    this.player = Video(
+      this.$refs.video,
+      Object.assign(this.defaultOptions, this.options),
+      function() {
+        // this.tech_.off("dblclick");
+        this.on("play", () => {
+          // this.volume(vm.video.volume);
+        });
+
+        this.on("volumechange", () => {
+          // vm.video.volume = this.volume();
+          // window.localStorage.volume = this.volume();
+        });
+
+        this.on("error", () => {
+          let err = this.error();
+          if (err.code === 2) {
+            // 判断是否是网络加载问题
+            let buffTime = this.bufferedEnd() - 6;
+            this.load(vm.src);
+            this.currentTime(buffTime);
+            this.play();
+          } else {
+            console.log(err.message);
+          }
+        });
+      }
+    );
+  }
+};
+</script>
+<style lang="less">
+// scoped
+// 进度显示当前播放时间
+.video-js {
+  .vjs-time-control {
+    display: block;
+  }
+  // .vjs-remaining-time {
+  //   display: none;
+  // }
+  .vjs-current-time.vjs-time-control {
+    display: block;
+  }
+  .vjs-duration.vjs-time-control {
+    display: block;
+  }
+}
+
+// .video-js
+// 暂停时显示播放按钮
+.vjs-paused .vjs-big-play-button,
+.vjs-paused.vjs-has-started .vjs-big-play-button {
+  display: block;
+}
+
+// 点击屏幕播放/暂停
+.video-js.vjs-playing .vjs-tech {
+  pointer-events: auto;
+}
+</style>