| commit | author | age | ||
| 105729 | 1 | <template> |
| I | 2 | <div> |
| 3 | <div class="myVideo"> | |
| 4 | <div id="videoPlay" ref="test1" class="dplayer"></div> | |
| 5 | <!-- <div class="mark" ></div> --> | |
| 6 | <!-- 视频 --> | |
| 7 | <div class="player-video-state"> | |
| 8 | <span class="bp-svgicon"> | |
| 9 | <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" | |
| 10 | xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| 11 | <defs> | |
| 12 | <path id="pid-1-svgo-a" d="M0 0h80v80H0z"></path> | |
| 13 | <path | |
| 14 | d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z" | |
| 15 | id="pid-1-svgo-d"></path> | |
| 16 | <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%" filterUnits="objectBoundingBox" | |
| 17 | id="pid-1-svgo-c"> | |
| 18 | <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> | |
| 19 | <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"> | |
| 20 | </feGaussianBlur> | |
| 21 | <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1" | |
| 22 | result="shadowMatrixOuter1"></feColorMatrix> | |
| 23 | <feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset> | |
| 24 | <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"> | |
| 25 | </feGaussianBlur> | |
| 26 | <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter2" | |
| 27 | result="shadowMatrixOuter2"></feColorMatrix> | |
| 28 | <feMerge> | |
| 29 | <feMergeNode in="shadowMatrixOuter1"></feMergeNode> | |
| 30 | <feMergeNode in="shadowMatrixOuter2"></feMergeNode> | |
| 31 | </feMerge> | |
| 32 | </filter> | |
| 33 | </defs> | |
| 34 | <g fill="none" fill-rule="evenodd" opacity=".8"> | |
| 35 | <mask id="pid-1-svgo-b" fill="#fff"> | |
| 36 | <use xlink:href="#pid-1-svgo-a"></use> | |
| 37 | </mask> | |
| 38 | <g mask="url(#pid-1-svgo-b)"> | |
| 39 | <use fill="#000" filter="url(#pid-1-svgo-c)" xlink:href="#pid-1-svgo-d"></use> | |
| 40 | <use fill="#FFF" xlink:href="#pid-1-svgo-d"></use> | |
| 41 | </g> | |
| 42 | </g> | |
| 43 | </svg> | |
| 44 | </span> | |
| 45 | </div> | |
| 46 | </div> | |
| 47 | </div> | |
| 48 | </template> | |
| 49 | ||
| 50 | <script> | |
| 51 | import Hls from 'hls.js' | |
| 52 | import DPlayer from 'dplayer' | |
| 53 | ||
| 54 | export default { | |
| 55 | data() { | |
| 56 | return { | |
| 57 | dp: null, | |
| 58 | video: {}, | |
| af029b | 59 | firstLoad: true |
| 105729 | 60 | } |
| I | 61 | }, |
| 62 | methods: { | |
| 63 | myPlay() { | |
| 64 | this.$message.info("start play..") | |
| af029b | 65 | }, |
| I | 66 | changePlay(videoData) { |
| 67 | // this.video = { | |
| 68 | // img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", | |
| 69 | // url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3", | |
| 70 | // type: "normal" | |
| 71 | // } | |
| 72 | ||
| 73 | this.loadVideo(videoData) | |
| 74 | ||
| 75 | // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除 | |
| 76 | // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单 | |
| 77 | document.querySelector(".dplayer-mask").remove(); | |
| 78 | document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源 | |
| 79 | let length = document.querySelectorAll(".dplayer-menu-item").length; | |
| 80 | document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息 | |
| 81 | document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息 | |
| 105729 | 82 | }, |
| I | 83 | loadVideo(videoInfo) { |
| 84 | this.dp = new DPlayer({ | |
| 85 | element: document.getElementById("videoPlay"), | |
| 86 | //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo | |
| 87 | // hotkey: true, // 是否支持热键，调节音量，播放，暂停等 | |
| 88 | mutex: false, // 防止同时播放多个用户，在该用户开始播放时暂停其他用户 | |
| 89 | theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色 | |
| 90 | loop: false, // 是否自动循环 | |
| 91 | lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw' | |
| 92 | // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地 | |
| 93 | preload: "auto", // 自动预加载 | |
| 94 | volume: 0.1, // 初始化音量 | |
| 95 | playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义 | |
| 96 | contextmenu: [ | |
| 97 | // 自定义上下文菜单 | |
| 98 | //右键菜单 | |
| 99 | { | |
| 100 | text: "b站", | |
| 101 | link: "https://www.bilibili.com" | |
| 102 | }, | |
| 103 | // { | |
| 104 | // text: "选项二", | |
| 105 | // click: player => { | |
| 106 | // console.log(player); | |
| 107 | // } | |
| 108 | // } | |
| 109 | ], | |
| 110 | highlight: [ | |
| 111 | //进度条上的自定义时间标记 | |
| 112 | // 进度条时间点高亮 | |
| 113 | { | |
| 114 | text: "10M", | |
| 115 | time: 60 | |
| 116 | }, | |
| 117 | { | |
| 118 | text: "20M", | |
| 119 | time: 120 | |
| 120 | } | |
| 121 | ], | |
| 122 | video: { | |
| 123 | pic: videoInfo.img, // 视频封面 | |
| 124 | url: videoInfo.url, | |
| 125 | type: videoInfo.type, | |
| 126 | customType: { | |
| 127 | customHls: function(video, player) { | |
| 128 | const hls = new Hls() | |
| 129 | hls.loadSource(video.src) | |
| 130 | hls.attachMedia(video) | |
| 131 | } | |
| 132 | } | |
| 133 | } | |
| 134 | }) | |
| 135 | } | |
| 136 | } | |
| af029b | 137 | |
| 105729 | 138 | } |
| I | 139 | </script> |
| 140 | <style lang="less" scoped> | |
| 141 | .myVideo { | |
| 142 | position: relative; | |
| 143 | // width: 220px; | |
| 144 | // height: 140px; | |
| 145 | width: 300px; | |
| 146 | height: 180px; | |
| 147 | background-color: #565656; | |
| 148 | border-radius: 10px; | |
| 149 | margin: 10px; | |
| 150 | display: flex; | |
| 151 | ||
| 152 | ||
| 153 | } | |
| 154 | ||
| 155 | ||
| 156 | .myVideo:hover { | |
| 157 | .mark { | |
| 158 | background-color: #000; | |
| 159 | display: initial; | |
| 160 | } | |
| 161 | ||
| 162 | .player-video-state { | |
| 163 | // display: initial; | |
| 164 | } | |
| 165 | } | |
| 166 | ||
| 167 | ||
| 168 | .dplayer { | |
| 169 | width: 500px; | |
| 170 | } | |
| 171 | ||
| 172 | .mark { | |
| 173 | opacity: 0.45; | |
| 174 | width: 100%; | |
| 175 | height: 100%; | |
| 176 | position: absolute; | |
| 177 | background-color: #000; | |
| 178 | display: none; | |
| 179 | } | |
| 180 | ||
| 181 | .player-video-state { | |
| 182 | position: absolute; | |
| 183 | left: 43%; | |
| 184 | top: 35%; | |
| 185 | width: 50px; | |
| 186 | height: 50px; | |
| 187 | display: none; | |
| 188 | } | |
| 189 | </style> | |
