| | |
| | | <template> |
| | | <div> |
| | | <!-- <video>--> |
| | | <video width="100%" height="100%" controls> |
| | | <source src="movie.mp4" type="video/mp4"> |
| | | <source src="movie.ogg" type="video/ogg"> |
| | | <!-- 您的浏览器不支持 HTML5 video 标签。--> |
| | | </video> |
| | | <!-- <span class="ico ico-sound" :class="{ active: isMute }" v-on:click="closeSoundClick()"></span>--> |
| | | <!-- <span class="ico ico-skip"></span>--> |
| | | <!-- <span class="ico ico-video" :class="{ hide: isPlay }" v-on:click="playClick()"></span>--> |
| | | <!-- </video>--> |
| | | </div> |
| | | <div class="win" > |
| | | <!-- 四个角的边框效果 --> |
| | | <div class="border_corner border_corner_left_top"></div> |
| | | <div class="border_corner border_corner_right_top"></div> |
| | | <div class="border_corner border_corner_left_bottom"></div> |
| | | <div class="border_corner border_corner_right_bottom"></div> |
| | | <div class="main"> |
| | | <div class="main-video"> |
| | | <video controls> |
| | | <source src="movie.mp4" type="video/mp4"> |
| | | <source src="movie.ogg" type="video/ogg"> |
| | | </video> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | <style scoped lang="less"> |
| | | .win { |
| | | position: relative; |
| | | background-color: rgba(33, 41, 69,0.9); |
| | | } |
| | | .main { |
| | | width: 100%; |
| | | height: 100%; |
| | | .main-video { |
| | | //border: 1px solid #396d83; |
| | | width: 100%; |
| | | height: 100%; |
| | | video { |
| | | width: 100%; |
| | | height: 100%; |
| | | outline: none; |
| | | } |
| | | } |
| | | } |
| | | .border_corner{ |
| | | z-index: 999; |
| | | position: absolute; |
| | | width: 14px; |
| | | height: 14px; |
| | | background: rgba(0,0,0,0); |
| | | border: 1.5px solid #47d5ea; |
| | | } |
| | | .border_corner_left_top{ |
| | | top: 0; |
| | | left: 0; |
| | | border-right: none; |
| | | border-bottom: none; |
| | | } |
| | | .border_corner_right_top{ |
| | | top: 0; |
| | | right: 0; |
| | | border-left: none; |
| | | border-bottom: none; |
| | | } |
| | | .border_corner_left_bottom{ |
| | | bottom: 0; |
| | | left: 0; |
| | | border-right: none; |
| | | border-top: none; |
| | | } |
| | | .border_corner_right_bottom{ |
| | | bottom: 0; |
| | | right: 0; |
| | | border-left: none; |
| | | border-top: none; |
| | | } |
| | | </style> |