search

quasarframework / quasar-ui-qmediaplayer

QMediaPlayer for Quasar
https://quasarframework.github.io/quasar-ui-qmediaplayer
MIT License
213 stars 52 forks source link

Youtube embed #264

Open bekmuradov opened 3 years ago

bekmuradov commented 3 years ago

Describe the bug

Hi. Trying to embed videos from YouTube, but getting this error in the console.

When I inspect the console I see HTML video element with src attribute <video poster="" preload="metadata" class="q-media--player" style="height: 100%;" src="https://www.youtube-nocookie.com/embed/qZXt1Aom3Cs"><p>To view this video please enable JavaScript and/or consider upgrading to a browser that supports HTML5 video.</p></video>

This is my code:

<template>
  <div class="q-pb-md" style="max-width: 514px;">
    <!-- <q-video
      id="yt-embed"
      :ratio="16/9"
      :src="`https://www.youtube-nocookie.com/embed/${$route.params.videoId}`"
    /> -->
    <q-media-player
      ref="myPlayer"
      type="video"
      background-color="black"
      :muted="muted"
      :show-big-play-button="true"
      :sources="video.sources"
      :poster="video.poster"
      :tracks="video.tracks"
      track-language="English"
    ></q-media-player>
    <q-card>
      <q-expansion-item
        expand-separator
        :label="video.title"
        :caption="video.channel.name"
        class="youtube-expansion"
      >
      <q-card-section class="q-pt-none">
        {{ video.snippet.description }}
      </q-card-section>
      </q-expansion-item>
    </q-card>
  </div>
</template>

<script>
export default {
  name: 'VideoPage',
  data () {
    return {
      muted: true
    }
  },
  computed: {
    video () {
      const videoId = this.$route.params.videoId
      const videoObj = this.$store.state.youtube.videos.find(video => video.id === videoId)
      return {
        ...videoObj,
        label: videoObj.title,
        poster: '',
        sources: [
          {
            src: `https://www.youtube-nocookie.com/embed/${videoId}`,
            type: 'video/mp4'
          }
        ]
      }
    }
  }
}
</script>

If I use <q-video/> element it plays fine. I tried to use both of this youtube links https://www.youtube-nocookie.com/embed/qZXt1Aom3Cs https://www.youtube.com/embed/qZXt1Aom3Cs

This is my package json file:

{
  "name": "yt",
  "version": "0.0.1",
  "description": "",
  "productName": "Quasar App",
  "author": "Beck",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue ./",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "jquery": "^3.6.0",
    "quasar": "^1.0.0"
  },
  "devDependencies": {
    "@quasar/app": "^2.0.0",
    "@quasar/quasar-app-extension-qmediaplayer": "^1.2.1",
    "babel-eslint": "^10.0.1",
    "dotenv": "^10.0.0",
    "eslint": "^7.21.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-vue": "^7.7.0",
    "eslint-webpack-plugin": "^2.4.0"
  },
  "browserslist": [
    "ie >= 11",
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 10.18.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

Desktop

hawkeye64 commented 3 years ago

QVideo uses an iframe. What happens if you use just

However, this says you must explicitly use an iframe. In which case, maybe QMediaPlayer will work if you do that.

image