0

When watching a video, its possible to enter developer mode in the browser and enter the following command in the console to change the playback speed of a video 

document.getElementsByTagName('video')[0].playbackRate = 0.9

When I try however to code this in html I am unable to access the video object. 

var obj = document.getElementsByTagName('video');
console.log(obj);

returns an object of length 0

also trying

var player1 = document.getElementById("video");
console.log(player1);
player1.playbackRate = 2;

returns null

A demo of the not working code so far is here: https://jsbin.com/peludojisi/1/edit?html,js,console,output

Can someone please help me figure out how to set the playbackRate from html

many thanks in advance

Jesse

Jesse RJ
  • 217
  • 4
  • 17

1 Answers1

2

document.querySelector does not work across iframes. Since the video in your example is within an iframe, your query returns null.

The error message in you snippet tells you almost as much:

"TypeError: Cannot set property 'defaultPlaybackRate' of null at :16:59

Line 16 of your script:

  document.querySelector('video').defaultPlaybackRate = 2.0;
junvar
  • 11,151
  • 2
  • 30
  • 46
  • indeed, this line fails. I am wondering how the browser console is able to run the query and work despite the iframes – Jesse RJ Mar 13 '19 at 15:44
  • Querying does not include iframe contents, regardless of whether you're using the browser dev console or querying from a script on the page. – junvar Mar 13 '19 at 15:51
  • there seems to be someway to query the contents of iframes https://stackoverflow.com/questions/26630519/queryselector-for-web-elements-inside-iframe – Jesse RJ Mar 13 '19 at 15:54
  • I realize now that searching inside the iframe isn't possible due to the it being generated on another domain. – Jesse RJ Mar 15 '19 at 08:55