| | |
| | | @click="fullScreen" |
| | | :disable="false" |
| | | ></b> |
| | | |
| | | <!-- 下载 --> |
| | | <i |
| | | class="el-icon-download jsmodern-video-download" |
| | | @click="downLoad" |
| | | ></i> |
| | | </section> |
| | | |
| | | <!-- 大播放按钮 --> |
| | |
| | | playerIndex: 0, |
| | | isEmptyUrl: false, |
| | | videoLoading: false, |
| | | loadUrl:'', |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | } |
| | | |
| | | this.playerStatus = this.player.PlayOrPause |
| | | |
| | | this.loadUrl = url |
| | | }, |
| | | setPlayerStatus(stat) { |
| | | this.videoLoading = false |
| | |
| | | |
| | | fullScreen() { |
| | | this.player.fullscreen() |
| | | }, |
| | | |
| | | async downLoad() { |
| | | this.$notify.info({ |
| | | title: '消息', |
| | | message: '资源下载中,请稍后...' |
| | | }); |
| | | let url = 'http:/'+this.loadUrl.substring(10) |
| | | let name = url.substring(url.lastIndexOf("/") + 1) |
| | | let responsePromise = await fetch(url) |
| | | let blob = await responsePromise.blob() |
| | | let objectURL = window.URL.createObjectURL(blob) |
| | | let a = document.createElement('a') |
| | | a.href = objectURL |
| | | a.download = name |
| | | a.click() |
| | | a.remove() |
| | | /* let url = 'http:/'+this.loadUrl.substring(10) |
| | | let link = document.createElement("a"); //创建a标签 |
| | | let name = url.substring(url.lastIndexOf("/") + 1) |
| | | link.style.display = "none"; //使其隐藏 |
| | | link.href = url; //赋予文件下载地址 |
| | | link.setAttribute("download", name); //设置下载属性 以及文件名 |
| | | document.body.appendChild(link); //a标签插至页面中 |
| | | link.click(); //强制触发a标签事件 */ |
| | | |
| | | }, |
| | | |
| | | playPrev() { |
| | |
| | | background: rgba(255, 255, 255, 0.25); |
| | | border-radius: 3px; |
| | | width: 460px; |
| | | width: -webkit-calc(100% - 220px); |
| | | width: -moz-calc(100% - 220px); |
| | | width: calc(100% - 220px); |
| | | width: -webkit-calc(100% - 260px); |
| | | width: -moz-calc(100% - 260px); |
| | | width: calc(100% - 260px); |
| | | float: left; |
| | | margin: 19px 0 0 65px; |
| | | position: relative; |
| | |
| | | opacity: 0.5; |
| | | cursor: default; |
| | | } |
| | | |
| | | .el-icon-download { |
| | | font-size: 24px; |
| | | width: 18px; |
| | | height: 18px; |
| | | margin-top: 7px; |
| | | margin-left: -12px; |
| | | } |
| | | |
| | | } |
| | | |
| | | .video-player:hover { |