index.vue 804 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <div class="container">
  3. <video ref="videoPlayer" class="video-js"></video>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'VideoPlayer',
  9. props: {
  10. src: {
  11. type: String,
  12. default() {
  13. return ''
  14. }
  15. }
  16. },
  17. data() {
  18. return {
  19. player: null,
  20. options: {
  21. autoplay: false,
  22. controls: true,
  23. language: 'zh-CN', // 设置语言
  24. width: 300,
  25. height: 225,
  26. sources: [
  27. {
  28. src: this.src,
  29. type: rovide.type
  30. }
  31. ]
  32. }
  33. }
  34. },
  35. mounted() {
  36. this.player = this.$video(this.$refs.videoPlayer, this.options, () => {
  37. this.player.log('onPlayerReady', this)
  38. })
  39. },
  40. beforeDestroy() {
  41. if (this.player) {
  42. this.player.dispose()
  43. }
  44. }
  45. }
  46. </script>
  47. <style lang="less" scoped>
  48. </style>