tencent.jquery.pix.component 1.0.6-6.beta1

package/components/video/videocss.scss

@@ -0,0 +1,497 @@
+.myplayer-shrink1 {
+  flex-shrink: 1;
+}
+
+.myplayer-grow1 {
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.myplayer-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-origin: left center;
+  transform: scaleY(1);
+  background-color: #000;
+  overflow: hidden;
+}
+
+.myplayer-container.myplayer-full-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  // width: 71%;
+  // height: 68%;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+  transform: translate3d(0, 0, 0);
+  // margin-left: 15%;
+  // margin-top: 22%;
+}
+
+.myplayer-container,
+.myplayer-container * {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  font-size: 100%;
+  font-weight: normal;
+  line-height: 1;
+  text-decoration: none;
+  vertical-align: middle;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+.myplayer-container video,
+.temp-div {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  z-index: 1;
+}
+
+.myplayer-container .myplayer-video-mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background-color: rgba(0, 0, 0, 0.2);
+  justify-content: center;
+  align-items: center;
+}
+
+.myplayer-container .myplayer-video-mask.myplayer-transparent {
+  opacity: 0;
+}
+
+.myplayer-container .myplayer-btn-big-play {
+  width: 2rem;
+  height: 2rem;
+  background: url(resources/images/origin-play.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.myplayer-container.myplayer-full-screen .myplayer-btn-big-play {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.myplayer-container .myplayer-btn-big-play.myplayer-transparent {
+  opacity: 0;
+}
+
+.myplayer-container .myplayer-top {
+  position: absolute;
+  width: 100%;
+  height: 0.86rem;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  padding: 0 0.34rem;
+  box-sizing: border-box;
+  justify-content: start;
+  align-items: center;
+  background: linear-gradient(
+    rgba(0, 0, 0, 0.6),
+    rgba(0, 0, 0, 0.4),
+    rgba(0, 0, 0, 0.1),
+    rgba(0, 0, 0, 0)
+  );
+  opacity: 1;
+  transform: translateY(0);
+  transition: transform 0.5s, opacity 0.5s;
+}
+
+.myplayer-container .myplayer-top.myplayer-transparent {
+  transform: translateY(-80%);
+  opacity: 0;
+}
+
+.myplayer-container .myplayer-type {
+  width: auto;
+  height: 0.25rem;
+  font-size: 0.18rem;
+  line-height: 0.25rem;
+  color: #e5fd0e;
+  padding: 0 0.14rem;
+  margin-right: 0.12rem;
+  box-sizing: border-box;
+  border: 0.01rem #e5fd0e solid;
+  border-radius: 0.04rem;
+  flex-shrink: 0;
+}
+
+.myplayer-container .myplayer-title {
+  width: 0;
+  flex-grow: 1;
+  font-size: 0.24rem;
+  color: #fff;
+  line-height: 0.25rem;
+  height: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.myplayer-container .myplayer-bottom {
+  position: absolute;
+  width: 100%;
+  // height: 0.86rem;
+  bottom: 0;
+  left: 0;
+  z-index: 3;
+  box-sizing: border-box;
+  background: linear-gradient(
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.1),
+    rgba(0, 0, 0, 0.4),
+    rgba(0, 0, 0, 0.6)
+  );
+  opacity: 1;
+  transform: translateY(0);
+  transition: transform 0.5s, opacity 0.5s;
+}
+
+.myplayer-container .myplayer-bottom.myplayer-transparent {
+  transform: translateY(80%);
+  opacity: 0;
+}
+
+.myplayer-container .myplayer-control {
+  position: relative;
+  width: 100%;
+  // height: 0.6rem;
+  flex-direction: column;
+}
+
+// .myplayer-contain .myplayer-control>* {
+//   margin: 0 0.1rem;
+// }
+.myplayer-container .myplayer-btn-play,.myplayer-container .myplayer-btn-pause {
+  background-position: center center;
+  background-size: 0.6rem 0.75rem;
+  box-sizing: border-box;
+  width: 1.75rem;
+  height: 0.75rem;
+}
+.myplayer-container .myplayer-btn-play {
+  background-image: url(resources/images/play.png);
+  background-repeat: no-repeat;
+}
+
+.myplayer-container .myplayer-btn-pause {
+  background-image: url(resources/images/pause.png);
+  background-repeat: no-repeat;
+}
+// 全屏时，尺寸进行变更
+.myplayer-container  .myplayer-bottom.myplayer-full-screen .myplayer-btn-play,.myplayer-container .myplayer-bottom.myplayer-full-screen .myplayer-btn-pause {
+  width: 1.95rem;
+}
+// 全屏时扩大缩小位置变更
+.myplayer-bottom.myplayer-full-screen .myplayer-control .myplayer-btn-full-screen, .myplayer-bottom.myplayer-full-screen .myplayer-control .myplayer-btn-exit-full-screen{
+  right:0rem;
+}
+// 缩小时的缩小图标样式
+.myplayer-bottom.myplayer-full-screen .myplayer-control .myplayer-btn-exit-full-screen div{
+  width: 0.72rem;
+  height: 0.65rem;
+}
+
+.myplayer-container .myplayer-btn-replay {
+  width: 0.53rem;
+  height: 0.52rem;
+  background: url(resources/images/replay.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.myplayer-container .myplayer-playtime,
+.myplayer-container .myplayer-totaltime,
+.myplayer-container .myplayer-divide {
+  font-size: 0.36rem;
+  line-height: 0.36rem;
+  color: #fff;
+  vertical-align: middle;
+}
+
+.myplayer-container .myplayer-playtime {
+  margin-left: 0.2rem;
+}
+.myplayer-container .myplayer-divide {
+  margin: 0 0.1rem;
+}
+
+.myplayer-container .myplayer-progress {
+  position: relative;
+  width: 0;
+  height: 0.2rem;
+  flex-grow: 1;
+  border-radius: 0.06rem;
+  margin-top: 0.03rem;
+}
+
+.myplayer-container .myplayer-progress-bg,
+.myplayer-container .myplayer-subprogress {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 0.1rem;
+  // margin-top: -0.03rem;
+  // border-radius: 0.06rem;
+}
+
+.myplayer-container .myplayer-progress-bg {
+  width: 100%;
+  background-color: #8d8f91;
+}
+
+.myplayer-container .myplayer-subprogress {
+  width: 0;
+  background-color: #ff6429;
+  /*transition: width 1s linear;*/
+  max-width: 100%;
+}
+
+.myplayer-container .myplayer-subprogress div {
+  content: "";
+  position: absolute;
+  width: 0.14rem;
+  height: 0.14rem;
+  top: 50%;
+  right: -0.07rem;
+  margin-top: -0.07rem;
+  transform: rotate(45deg);
+  background-color: #e5fd0e;
+}
+
+.myplayer-container .myplayer-resolution {
+  position: relative;
+  // height: 0.2rem;
+  width: auto;
+  margin: 0 0.3rem;
+}
+
+.myplayer-container .myplayer-resolution > text {
+  font-size: 0.36rem;
+  line-height: 0.36rem;
+  color: #fff;
+  vertical-align: middle;
+}
+
+.myplayer-container .myplayer-resolutionlist {
+  display: none;
+  position: absolute;
+  width: auto;
+  height: auto;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 160%;
+  padding: 0.08rem;
+  border-radius: 0.1rem;
+  box-sizing: border-box;
+  background-color: #1c1c1c;
+  flex-direction: column;
+}
+
+.myplayer-container .myplayer-resolutionlist text {
+  font-size: 0.2rem;
+  color: #fff;
+  line-height: 0.38rem;
+  vertical-align: middle;
+  padding: 0 0.23rem;
+  box-sizing: border-box;
+  border-radius: 0.1rem;
+  padding: 0 0.32rem;
+  flex-grow: 1;
+}
+
+.myplayer-container .myplayer-resolutionlist text.on {
+  background-color: #323232;
+}
+
+.myplayer-container .myplayer-volume {
+  position: relative;
+  width: 0.34rem;
+  height: 0.23rem;
+}
+
+.myplayer-container .myplayer-volume-icon,
+.myplayer-container .myplayer-volume-off-icon {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.myplayer-container .myplayer-volume-icon {
+  background-position: -1.5rem -0.53rem;
+}
+
+.myplayer-container .myplayer-volume-off-icon {
+  background-position: -1.53rem -0.1rem;
+}
+
+.myplayer-container .myplayer-volume-rate {
+  position: absolute;
+  width: 0.5rem;
+  height: 1.4rem;
+  bottom: 160%;
+  left: 50%;
+  margin-left: -0.25rem;
+  padding: 0.08rem 0 0.1rem;
+  border-radius: 0.1rem;
+  box-sizing: border-box;
+  background-color: #1c1c1c;
+  flex-direction: column;
+  align-items: center;
+}
+
+.myplayer-container .myplayer-volume-rate text {
+  width: 100%;
+  line-height: 0.28rem;
+  margin-bottom: 0.04rem;
+  font-size: 0.18rem;
+  text-align: center;
+  vertical-align: middle;
+  color: #fff;
+}
+
+.myplayer-container .myplayer-volume-line {
+  position: relative;
+  width: 0.2rem;
+  height: 0;
+  flex-grow: 1;
+}
+
+.myplayer-container .myplayer-volume-linebg,
+.myplayer-container .myplayer-volume-subline {
+  position: absolute;
+  width: 0.06rem;
+  height: 100%;
+  border-radius: 0.06rem;
+  bottom: 0;
+  left: 50%;
+  margin-left: -0.03rem;
+}
+
+.myplayer-container .myplayer-volume-linebg {
+  background-color: #c3c3c3;
+}
+
+.myplayer-container .myplayer-volume-subline {
+  background-color: #e5fd0e;
+}
+
+.myplayer-container .myplayer-volume-subline div {
+  content: "";
+  position: absolute;
+  width: 0.14rem;
+  height: 0.14rem;
+  left: 50%;
+  top: -0.07rem;
+  margin-left: -0.08rem;
+  transform: rotate(45deg);
+  background-color: #e5fd0e;
+}
+
+.myplayer-control .myplayer-btn-full-screen,
+.myplayer-control .myplayer-btn-exit-full-screen {
+  background: none;
+  width: 2rem;
+  height: 1.2rem;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  right: -0.4rem;
+  top: -0.25rem;
+}
+
+.myplayer-control .myplayer-btn-full-screen div {
+  width: 0.62rem;
+  height: 0.57rem;
+  background: url(resources/images/full-screen.png) no-repeat;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.myplayer-control .myplayer-btn-exit-full-screen div {
+  width: 0.52rem;
+  height: 0.5rem;
+  background: url(resources/images/exit-full-screen.png) no-repeat;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.myplayer-top .myplay-back {
+  width: 0.8rem;
+  height: 100%;
+  margin-left: -0.34rem;
+  justify-content: center;
+  align-items: center;
+}
+.myplayer-top .myplay-back div {
+  width: 0.26rem;
+  height: 0.26rem;
+  margin-left: 0.15rem;
+  border: 0.02rem rgba(255, 255, 255, 0.6) solid;
+  transform: rotate(-45deg);
+  border-bottom-width: 0;
+  border-right-width: 0;
+}
+
+.full-screen-mask {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.myplayer-btns {
+  margin: 0.35rem 0.15rem 0.35rem 0.2rem;
+  justify-content: space-between;
+}
+
+.myplayer-btns-left {
+  align-items: center;
+}
+
+.myplayer-btns-right {
+  align-items: center;
+  position: relative;
+}
+
+.myplayer-video-cover {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2;
+  background-color: rgba(0, 0, 0, 0.3);
+  background-image: url(resources/images/origin-play.png);
+  background-size: 2.16rem 2.16rem;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.myplayer-video-preview {
+  left:0;
+  top:0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}

package/components/video/videohtml.js

@@ -0,0 +1,85 @@
+const html = `
+<div class="myplayer-video-preview"></div>
+<div class="myplayer-video-cover"></div>
+
+<!-- 以下为播放器UI -->
+<div class="myplayer-container myplayer-grow1">
+<!--  <video src=""></video>-->
+  <div class="myplayer-video-mask myplayer-transparent">
+    <div class="myplayer-btn-big-play myplayer-transparent"></div>
+  </div>
+  <div class="myplayer-top myplayer-transparent">
+    <text class="myplayer-title"></text>
+  </div>
+  <div class="myplayer-bottom myplayer-transparent">
+    <div class="myplayer-control">
+      <div class="myplayer-grow1" style="margin: 0">
+        <!-- 进度条 -->
+        <div class="myplayer-progress" draggable="true">
+          <div class="myplayer-progress-bg"></div>
+          <div class="myplayer-subprogress">
+            <!-- <div></div> -->
+          </div>
+        </div>
+      </div>
+      <div class="myplayer-grow1 myplayer-btns myplayer-shrink1">
+        <div class="myplayer-btns-left">
+          <!-- 播放按钮 -->
+          <div class="myplayer-btn-play" style="display: none;"></div>
+          <!-- 暂停按钮 -->
+          <div class="myplayer-btn-pause"></div>
+          <!-- 播放时间 -->
+          <text class="myplayer-playtime">00:00</text>
+          <text class="myplayer-divide">/</text>
+          <!-- 总时间 -->
+          <text class="myplayer-totaltime">00:00</text>
+        </div>
+        <div class="myplayer-btns-right">
+          <!-- 重播按钮 -->
+          <!-- <div class="myplayer-btn-replay"></div> -->
+          <!-- 分辨率 -->
+          <!-- <div class="myplayer-resolution">
+            <text class="myplayer-media-resolution">标清</text>
+            <div class="myplayer-resolutionlist">
+              <text class="myplayer-sd on">标清</text>
+              <text class="myplayer-hd">高清</text>
+            </div>
+          </div> -->
+          <!-- 音量 -->
+          <!-- <div class="myplayer-volume" style="display:none">
+            <div class="myplayer-volume-icon"></div>
+            <div class="myplayer-volume-off-icon" style="display: none;"></div>
+            <div class="myplayer-volume-rate" style="display: none;">
+              <text>50</text>
+              <div class="myplayer-volume-line" draggable="true">
+                <div class="myplayer-volume-linebg"></div>
+                <div class="myplayer-volume-subline" style="height: 50%;"><div></div></div>
+              </div>
+            </div>
+          </div> -->
+          <!-- 全屏/缩小全屏 -->
+          <div class="myplayer-btn-full-screen">
+            <div></div>
+          </div>
+          <div class="myplayer-btn-exit-full-screen" style="display: none;">
+            <div></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- 以下为播放器UI 临时变量 -->
+<!--<div class="variable">-->
+<!--  <div class="playerMediaStatus" style="display:none;">1</div>-->
+<!--  <div class="isShowContrilNav" style="display:none;">0</div>-->
+<!--  <div class="hideControlTimeout" style="display:none;">0</div>-->
+<!--  <div class="playTimeTimeout" style="display:none;">0</div>-->
+<!--  <div class="clickProgress" style="display:none;">0</div>-->
+<!--  <div class="isMax" style="display:none;">0</div>-->
+<!--  <div class="autohidenavhandle" style="display:none;"></div>-->
+<!--  <div class="clickvolumerate" style="display:none;">0</div>-->
+<!--</div>-->
+`;
+
+export default html;