vue js上的YouTube IFRAMEAPI无法发送play.playvideo()

因此，我试图整合youtube iframe API与vuej，目前试图发送player.stopVideo（），player.startVideo（），和player.pauseVideo（）观看函数，使所有观众同步在一起
尝试了3个小时，即使使用@vue-youtube-core也没有运气停留在相同的情况下，当尝试在手表部分调用事件时
谢欣尤乌

<template>
  <div class="w-screen h-screen flex flex-col">
    <Navbar />
    <div class="flex flex-col place-items-center items-center">
      <div class="flex" id="player" :videoId='videoId'/>
      <button class="bg-red-500" @click="$router.push('/')"> Home </button>
    </div>
    <div class="flex w-full flex-col justify-center items-center">
        <div class="flex w-2/4 justify-end" id="app">
          <p>User Connected: {{totaluser}}</p>
          <div class="w-2"></div>
          <p>Video Status : {{status}}</p>
          <div class="w-2"></div>
          <p>Video Time : {{videotime}}</p>
          <div class="w-2"></div>
          <p>Host : {{host}}</p>
          <p>User : {{user}}</p>
        </div>
      </div>  
  </div>
</template>

<script>
import io from 'socket.io-client'
import axios from 'axios'
const socket = io('http://localhost:3000')
import Navbar from "/src/components/Navbar.vue"
    export default {
        props: ['id'],
        data: function() {
            return {
                videoTitle: '',
                duration: '',
        videoId: 'ZbU2szTYnE8',
        user: '',
        host: '',
        status: 'Stopped',
        currentime: '0',
        videotime:'0',
        totaluser:'0'
            }
        },
    mounted() {
          this.Updateuser()
          this.youtube()
          this.setupSocket()
        },
    components:{
        Navbar
      },
    watch: {
      status: (newValue) => {
          if(newValue == "Paused"){
            console.log(player)
          }
          if(newValue == "Playing"){
            setTimeout(player.stopVideo(), 6000)
          }
          if(newValue == "Stopped"){
          }
        }
      },
      methods: {
          getvideoid(){
            video = this.video.id
          },
          pause(){
            const video = document.querySelector('video');
            video.onpause = (event) => {
            socket.emit('status', "Paused")
          };
          },
          play(){
            const video = document.querySelector('video');
            video.onplay = (event) => {
            video.currentTime = this.videotime
            socket.emit('host', this.user)
            socket.emit('status', "Playing")
          };
          },
          duration(){
            this.currentime=player.getCurrentTime()
            console.log(player.getCurrentTime())
          },
          async getData() {
           const data = await axios.get('http://localhost:3000/mymovie')
           this.list = data.data
          },
          async Updateuser() {
            this.user = "user" + parseInt(99999*Math.random())
          },
          setupSocket() {
          socket.on('connect', function () {
            console.log('connected')
          })
          socket.on('newData', (data) => {
            this.list.push(data)
          })
          socket.on('videotime', (data) => {
            this.videotime = data
          })
          socket.on('status', (data) => {
            this.status = data
          })
          socket.on('host', (data) => {
            this.host = data
          })
          socket.on('totaluser', (data) => {
            console.log("totaluser : " + data)
            this.totaluser = data
            console.log(this.totaluser)
          })
          socket.on('disconnect', function () {
            console.log('disconnected')
          })
          },

          // Youtubeee ////
          youtube() {
          var tag = document.createElement('script');
          tag.src = "http://www.youtube.com/iframe_api";
          var firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

          var player;
          window.onYouTubeIframeAPIReady = () => {
            player = new YT.Player('player', {
              height: 720,
              width: 1280,
              videoId: this.videoId,
              events: {
                'onReady': window.onPlayerReady,
                'onStateChange': window.onPlayerStateChange
              }
            });
          }

          window.onPlayerReady = (event) => {
            event.target.playVideo();
          }

          window.onPlayerStateChange = (event) => {
            if (event.data == YT.PlayerState.ENDED) {
                router.push('/')
                socket.emit('status', "Ended")
                if(this.host == this.user)
                        {
                            socket.emit('videotime', 0)
                        }
            }
            if (event.data == YT.PlayerState.PLAYING) {
                this.status = "Playing";
                socket.emit('host', this.user)
                socket.emit('status', "Playing")
                if(this.host == this.user)
                player.stopVideo();
                        {
                            socket.emit('videotime', event.target.getCurrentTime())
                        }
            }
            if (event.data == YT.PlayerState.PAUSED) {
                socket.emit('host', this.user)
                socket.emit('status', "Paused")
                if(this.host == this.user)
                        {
                            socket.emit('videotime', event.target.getCurrentTime())
                        }
            }
          }
        }
      }
}
</script>

我在html视频上测试了这个机制，并且工作完美，但是在youtube iframeapi上显示了这个错误TypeError：player.stopVideo不是一个函数，我安装在mount（）里面的youtube播放器iframe，所以这可能是我无法访问它的原因，但是如果你从console.log（player）里面访问，你会看到一个播放器弹了出来
参考我使用https://developers.google.com/youtube/iframe_api_reference，并试图复制停止启动功能，但在vuejs中，并使用watch方法不在youtube（）函数内

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {
  cors: {
    origins: ['*']
  }
});

var GlobaluserCount = [];
var videotime = '';
var status ='';
var host ='';

app.get('/', (req, res) => {
  res.send('<h1>Hey Socket.io</h1>');
});

io.on('connection', (socket) => {
    io.emit('message',"User Connected " + ++GlobaluserCount);
    io.emit('videotime',videotime);
    io.emit('totaluser',GlobaluserCount);
    console.log("User Connected " + GlobaluserCount);
    socket.on('disconnect', () => {
        io.emit('message',"User Connected " + --GlobaluserCount);
        io.emit('totaluser',GlobaluserCount);
        console.log("User Connected " + GlobaluserCount);
  });
  socket.on('videotime', (data) => {
    videotime = data
    console.log(data);  
});
socket.on('host', (data) => {
    host = data
    console.log(data);  
});
socket.on('status', (data) => {
    status = data
    console.log(data);  
});
  socket.on('event', (data) => {
    console.log('data masuk', data);
});
socket.on('message', function(data) {
    io.emit('message', 'Get you right back...')
    console.log(data);
});
});

setInterval(() => {
    io.emit("videotime", videotime);
    io.emit("status", status);
    io.emit("host", host);
}, 500);

http.listen(3000, 'localhost', () => {
  console.log('listening on *:3000');
});

@vue-youtube-core 0.0.2代码你也可以试试这个版本，如果它更容易工作，请回复任何版本，你可以修复谢谢

<template>
  <div class="w-screen h-screen flex flex-col">
    <Navbar />
    <div class="flex flex-col place-items-center items-center">
      <div class="flex" ref="player" />
      <button class="bg-red-500" @click="$router.push('/')"> Home </button>
      <div>
        <p>{{wsdata.status}}</p>
        <p>{{wsdata.host}}</p>
        <p>{{wsdata.user}}</p>
        <p>{{wsdata.currentime}}</p>
        <p>{{wsdata.videotime}}</p>
        <p>{{wsdata.totaluser}}</p>
      </div>
    </div>
  </div>
</template>

<script setup scope>
import Navbar from "/src/components/Navbar.vue"
import router from '/src/router/index'
import { usePlayer , PlayerState } from '@vue-youtube/core'
import io from 'socket.io-client'
import { onMounted, reactive, ref, watch } from "vue"

const socket = io('http://localhost:3000')
const nameUpdatesCount = ref(0);
const wsdata = reactive({status:'Stopped', host: '', user: '', currentime: '', videotime: '', totaluser: ''});

const player = ref();  

const { onReady, onStateChange } = usePlayer(videoId, player, {
  cookie: false,
  playerVars: {
    mute: 0,  
    width: screen.width,
    height: screen.height
  },
});

function setupSocket() {
          socket.on('connect', function () {
            console.log('connected')
          })
        }
        socket.on('newData', (data) => {
          wsdata.list.push(data)
          })
          socket.on('videotime', (data) => {
            wsdata.videotime = data
          })
          socket.on('status', (data) => {
            wsdata.status = data
          })
          socket.on('host', (data) => {
            wsdata.host = data
          })
          socket.on('totaluser', (data) => {
            console.log("totaluser : " + data)
            wsdata.totaluser = data
            console.log(wsdata.totaluser)
          })
          socket.on('disconnect', function () {
            console.log('disconnected')
          })

onMounted(() => {
  Updateuser()
  setupSocket()
})

onStateChange((event) => {
  if (event.data == PlayerState.ENDED) {
    router.push('/')
    socket.emit('status', "Ended")
    if(wsdata.host == wsdata.user)
            {
                socket.emit('videotime', 0)
            }
  }
  if (event.data == PlayerState.PLAYING) {
    wsdata.status = "Playing";
    socket.emit('host', wsdata.user)
    socket.emit('status', "Playing")
    if(wsdata.host == wsdata.user)
            {
                socket.emit('videotime', event.target.getCurrentTime())
            }
  }
  if (event.data == PlayerState.PAUSED) {
    socket.emit('host', wsdata.user)
    socket.emit('status', "Paused")
    if(wsdata.host == wsdata.user)
            {
                socket.emit('videotime', event.target.getCurrentTime())
            }
    }
}); 

onReady((event) => {
  event.target.playVideo();
});

watch(() => wsdata.status,
  (status) => {
          console.log(player)
          if(status == "Paused"){
            player.playVideo();
          }
          if(status == "Playing"){;
          }
          if(status == "Stopped"){
          }
  }
)

function Updateuser() {
          wsdata.user = "user" + parseInt(99999*Math.random())
          }
</script>

vue js上的YouTube IFRAMEAPI无法发送play.playvideo()

1条答案

相关问题

热门标签

最新问答