2

I am developing a Chrome extension for Youtube and when the user clicks a button that I have created I want to simulate a mouse hover over the player, without moving the mouse. When a video is playing and the mouse is, manually, hovered over the player, the controls (play, pause etc) and the progress bar shows and this is what I am trying to accomplish, but with a button click instead of hovering.

I don't want to pause the video, only show the bottom controls and progress bar when the user clicks the button I have created.

manifest.json

//name, description, background etc
"content_scripts": [
    {
      "matches": ["http://www.youtube.com/*", "https://www.youtube.com/*"],
      "js": ["jquery.js", "content.js"]
    }
  ]

content.js

$('#myButton').on('click', function() {

    //I have tried the following:
    $('#movie_player').trigger('mouseenter')
    $('#movie_player').mouseenter()
    document.getElementById('movie_player').onmouseenter()

    //I can play/pause the video with:
    $('#movie_player').click()
}

I have also tried "mouseover" (jQuery) and "onmouseover" (javascript) and I have also tried these on several different child elements of the #movie_player without success.

When hovering manually over the player, Chrome's DevTools shows me that the #movie_player element has a class (ytp-autohide) which gets removed/added when the mouse is entering/leaving the element. However. I can't just remove this class when the user clicks my button because then the progress bar/duration time is not updated.

Any ideas?

Junker
  • 397
  • 3
  • 13
  • That will be a feature of the YouTube embed. Either it can be commanded in that way or not. The YouTube documentation will tell you. – Roamer-1888 Aug 07 '17 at 10:23
  • Seems that the autohide parameter has been deprecated. Isn't there anyway to accomplish this in a chrome extension? I also tried trigger the javascript .onmouseover() by injecting a file into the page without success. Method 1 -> https://stackoverflow.com/a/9517879/6193522 – Junker Aug 07 '17 at 13:29
  • I took a quick look at the [API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). There's a bunch of setter methods but none that would do what you are asking for. Take a look for yourself, I could have missed it. – Roamer-1888 Aug 07 '17 at 14:57

1 Answers1

0

Managed to solve it if someone is interested (with help from this extension)

$('#myButton').on('click', function() {
  const ytplayer = document.querySelector('.html5-video-player')
  const video = ytplayer.querySelector('video')
  const progressbar = ytplayer.querySelector('.ytp-play-progress')
  const loadbar = ytplayer.querySelector('.ytp-load-progress')

  //show controls and progress bar
  $('.html5-video-player').toggleClass('ytp-autohide')

  //update red progress bar
  video.addEventListener('timeupdate', updateProgressBar)
  function updateProgressBar() {
    progressbar.style.transform = 'scaleX('+(video.currentTime/video.duration)+')'
  }

  //update grey buffer progress
  video.addEventListener('progress', updateBufferProgress)
  function updateBufferProgress() {
    loadbar.style.transform = 'scaleX('+(video.buffered.end(video.buffered.length-1)/video.duration)+')'
  }

  //update current time
  $('.ytp-time-current').text(formatTime( video.currentTime ))

  //update current time every second
  const i = setInterval(function(){
    $('.ytp-time-current').text(formatTime( video.currentTime ))
  }, 1000)

  //stop after 3 seconds
  setTimeout(function() {
    $('.html5-video-player').toggleClass('ytp-autohide')
    clearInterval(i)
    video.removeEventListener('timeupdate',  updateProgressBar)
    video.removeEventListener('progress',  updateBufferProgress)
  }, 3000)
}

function formatTime(time){
  time = Math.round(time)

  const minutes = Math.floor(time / 60)
  let seconds = time - minutes * 60

  seconds = seconds < 10 ? '0' + seconds : seconds

  return minutes + ':' + seconds
}
Junker
  • 397
  • 3
  • 13