blog的前端代码
view | history | commit | commitdiff
inleft
2022-08-10 10572998aa54d61c45df3e334eb01e44a15df729
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: {},
59             }
60         },
61         methods: {
62             myPlay() {
63                 this.$message.info("start play..")
64             },
65             loadVideo(videoInfo) {
66                 this.dp = new DPlayer({
67                     element: document.getElementById("videoPlay"),
68                     //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
69                     // hotkey: true, // 是否支持热键，调节音量，播放，暂停等
70                     mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
71                     theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
72                     loop: false, // 是否自动循环
73                     lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
74                     // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
75                     preload: "auto", // 自动预加载
76                     volume: 0.1, // 初始化音量
77                     playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
78                     contextmenu: [
79                         //  自定义上下文菜单
80                         //右键菜单
81                         {
82                             text: "b站",
83                             link: "https://www.bilibili.com"
84                         },
85                         // {
86                         //     text: "选项二",
87                         //     click: player => {
88                         //         console.log(player);
89                         //     }
90                         // }
91                     ],
92                     highlight: [
93                         //进度条上的自定义时间标记
94                         // 进度条时间点高亮
95                         {
96                             text: "10M",
97                             time: 60
98                         },
99                         {
100                             text: "20M",
101                             time: 120
102                         }
103                     ],
104                     video: {
105                         pic: videoInfo.img, // 视频封面
106                         url: videoInfo.url,
107                         type: videoInfo.type,
108                         customType: {
109                             customHls: function(video, player) {
110                                 const hls = new Hls()
111                                 hls.loadSource(video.src)
112                                 hls.attachMedia(video)
113                             }
114                         }
115                     }
116                 })
117             }
118         },
119         mounted() {
120
121             this.video = {
122                 img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
123                 url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
124                 type: "normal"
125             }
126         
127             this.loadVideo(this.video)
128
129             // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
130             // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
131             document.querySelector(".dplayer-mask").remove();
132             document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
133             let length = document.querySelectorAll(".dplayer-menu-item").length;
134             document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
135             document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
136         }
137     }
138 </script>
139 <style lang="less" scoped>
140     .myVideo {
141         position: relative;
142         // width: 220px;
143         // height: 140px;
144         width: 300px;
145         height: 180px;
146         background-color: #565656;
147         border-radius: 10px;
148         margin: 10px;
149         display: flex;
150
151
152     }
153
154
155     .myVideo:hover {
156         .mark {
157             background-color: #000;
158             display: initial;
159         }
160
161         .player-video-state {
162             // display: initial;
163         }
164     }
165
166
167     .dplayer {
168         width: 500px;
169     }
170
171     .mark {
172         opacity: 0.45;
173         width: 100%;
174         height: 100%;
175         position: absolute;
176         background-color: #000;
177         display: none;
178     }
179
180     .player-video-state {
181         position: absolute;
182         left: 43%;
183         top: 35%;
184         width: 50px;
185         height: 50px;
186         display: none;
187     }
188 </style>