IphVideo.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!--
  2. * @Descripttion: 视频播放组件
  3. * @version: 1.0.0
  4. * @Author: dream
  5. * @Date: 2021-04-09 16:34:52
  6. * @LastEditors: dream
  7. * @LastEditTime: 2021-04-09 18:28:42
  8. -->
  9. <template>
  10. <div class="iph-video">
  11. <video
  12. ref="video"
  13. src="https://kvideo01.youju.sohu.com/57809bc9-b8d7-4cbd-931b-4f626c72c78f1_0_0.mp4"
  14. poster="https://d1icd6shlvmxi6.cloudfront.net/gsc/E14NP2/e3/bd/34/e3bd34282769491dae12c86cafb22cd5/images/2_首页/u50.jpg?token=d3f9e89d19d358dc1cbfc2df7219ec71639c0285e84c953bc2d8b82702bc832c"
  15. :controls="playing"
  16. width="567px"
  17. height="345px"
  18. @ended="videoEnd"
  19. style="object-fit: cover;"
  20. />
  21. <div class="cover" v-show="!playing">
  22. <img
  23. class="play-icon"
  24. src="https://d1icd6shlvmxi6.cloudfront.net/gsc/E14NP2/e3/bd/34/e3bd34282769491dae12c86cafb22cd5/images/2_首页/u164.svg?token=33044f8a6dacb3edd16b81de16d921232be2f56b81a00d178bf963930bf72c06"
  25. width="142px"
  26. height="148px"
  27. @click="play"
  28. />
  29. <img
  30. class="full-icon"
  31. src="https://d1icd6shlvmxi6.cloudfront.net/gsc/E14NP2/e3/bd/34/e3bd34282769491dae12c86cafb22cd5/images/2_首页/u165.svg?token=3366463f5e2de7278269fe9eb6f59be69977a95c6606ecb45726975c5c5b864f"
  32. width="30px"
  33. height="30px"
  34. @click="openFloating"
  35. />
  36. </div>
  37. </div>
  38. </template>
  39. <script>
  40. export default {
  41. name: 'IphVideo',
  42. data () {
  43. return {
  44. playing: false,
  45. dialogVisible: false
  46. }
  47. },
  48. methods: {
  49. play () {
  50. this.playing = true
  51. this.$refs.video.play()
  52. },
  53. videoEnd () {
  54. this.playing = false
  55. this.$refs.video.load()
  56. },
  57. openFloating () {
  58. this.playing = true
  59. this.$refs.video.requestPictureInPicture()
  60. }
  61. }
  62. }
  63. </script>
  64. <style lang="scss" scoped>
  65. .iph-video {
  66. position: relative;
  67. .cover {
  68. position: absolute;
  69. top: 0;
  70. left: 0;
  71. width: 567px;
  72. height: 345px;
  73. background-color: rgba(255, 255, 255, .5);
  74. .play-icon {
  75. position: absolute;
  76. top: 98px;
  77. left: 224px;
  78. }
  79. .full-icon {
  80. position: absolute;
  81. right: 12px;
  82. bottom: 12px;
  83. }
  84. }
  85. }
  86. </style>