How to Change the Speed of Video Playback

How to change the playing speed of videos in HTML5?

According to this site, this is supported in the playbackRate and defaultPlaybackRate attributes, accessible via the DOM. Example:

/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 2.0;
document.querySelector('video').play();

/* now play three times as fast just for the heck of it */
document.querySelector('video').playbackRate = 3.0;

The above works on Chrome 43+, Firefox 20+, IE 9+, Edge 12+.

How to increase speed of video playback within Python using openCV

This is the problem...

for x in range(width):
    for y in range(height):
         if canny[y,x] == 255:

Numpy.argmax is the solution...

for x in range(width-1):
    # Slice the relevant column from the image
    # The image 'column' is a tall skinny image, only 1px thick
    column = np.array(canny[:,x:x+1])
    # Use numpy to find the first non-zero value
    railPoint = np.argmax(column)

Full Code:

import cv2, numpy as np, time
# Get start time
start = time.time()
# Read in the image
img = cv2.imread('/home/stephen/Desktop/rail.jpg')[40:,10:-10]
# Canny filter
canny = cv2.Canny(img, 85, 255)
# Get height and width
height, width = canny.shape
# Create list to store rail points
railPoints = []
# Iterate though each column in the image
for position in range(width-1):
    # Slice the relevant column from the image
    # The image 'column' is a tall skinny image, only 1px thick
    column = np.array(canny[:,position:position+1])
    # Use numpy to find the first non-zero value
    railPoint = np.argmax(column)
    # Add the railPoint to the list of rail points
    railPoints.append(railPoint)
    # Draw a circle on the image
    cv2.circle(img, (position, railPoint), 1, (123,234,123), 2)
cv2.imshow('img', img)                      
k = cv2.waitKey(1)
cv2.destroyAllWindows()
print(time.time() - start)

My solution using Numpy took 6ms and your solution took 266ms.
rail output

How do I change the playback speed of the currently playing YouTube video, with JavaScript and the HTML5 player?

After playing around with the HTML, I just faked a .click(). That seems to be the best way. I poked around the YouTube API a bit but just found docs on embedding YouTube videos on your own page. I also played with HTML5 video like $('#video').playbackRate = 3.0 and you could then basically change the speed to whatever you wanted, but it wouldn't affect the dropdown box then, which can be useful if you want to change it back to another speed.

Here's the jQuery code:

$('#ytp-menu-speed').parent().find('.ytp-button:contains("1.5")').click()

Change 1.5 to whatever speed you want, as long as it's an option that YouTube provides.

What algorithm does YouTube use to change playback speed without affecting audio pitch?

I found this article on the subject dating back to 2017, I presume it's still valid or should give you some pointers: https://www.googblogs.com/variable-speed-playback-on-mobile/

It reads, in part:

"On Android, we used the Sonic library for our audio manipulation in ExoPlayer. Sonic uses PICOLA, a time domain based algorithm. On iOS, AVplayer has a built in playback rate feature with configurable time stretching."

How to change playback speed of videos on Facebook or other platforms

The only way I have figured out how to do this, is to modify the DOM.

I use the HTML source inspector (Ctrl+Shift+I on Firefox) and go to the INSPECTOR tab and I look for the VIDEO tag and look for the ID of this tag.

So for example it might look like this:

<video id="u_0_66" bla bla bla

So the id of this video is u_0_66

I then click on the CONSOLE tab, and there is a spot at the bottom for you type, so type the following:

document.getElementById("u_0_66").playbackRate = 1.25;

You can change the playback to whatever you want like slowing it down to half speed 0.5 or speeding it up to double speed 2.0, with 1.0 being normal playback speed.

How to change the playing speed of videos in HTML5 on mobile?

The answer is simply that Mobile Chrome (Android) doesn’t support playbackRate changes even tho this website says it does: https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement#AutoCompatibilityTable

This is the real browser supported by playbackRate changes on mobile:

Chrome 20+ ✔
Firefox 20+ ✔
IE 9+ ✔
Safari 6+ ✔
Opera 15+ ✔
Mobile Chrome (Android) ✖
Mobile Firefox 24+ ✔
IE Mobile ✖
Mobile Safari 6+ (iOS) ✔
Opera Mobile ✖

I created a website and tested it by first adding the following to the web.config-file:

<system.webServer>
    <staticContent>
           <mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
    </staticContent>
</system.webServer>

Then I uploaded a simple video to my website and uploaded it to Azure for testing in the different browsers: http://pandasneezy.azurewebsites.net/

I suggest you use Mobile Firefox 24+, and it should work just fine with
:
document.getElementById("my-video").playbackRate = 3.0;

Python Opencv control (increase/decrease) the video playback speed as custom

In the docs it is stated:

Note

This function should be followed by waitKey function which displays
the image for specified milliseconds. Otherwise, it won’t display the
image. For example, waitKey(0) will display the window infinitely
until any keypress (it is suitable for image display). waitKey(25)
will display a frame for 25 ms, after which display will be
automatically closed. (If you put it in a loop to read videos, it will
display the video frame-by-frame)

In cv2.waitKey(X) function X means the number of milliseconds for an image to be displayed on the screen. In your case it is set to 1, so theoretically you are able to achieve 1000 fps (frames per seconds). But frame decoding takes time in VideoCapture object and limits your framerate. To change the playback speed you need to declare variable and use it as a parameter in waitKey function.

import cv2

cap = cv2.VideoCapture('video.mp4')
frameTime = 10 # time of each frame in ms, you can add logic to change this value.
while(cap.isOpened()):
    ret, frame = cap.read()
    cv2.imshow('frame',frame)
    if cv2.waitKey(frameTime) & 0xFF == ord('q'):
        break
cap.release()
cv2.destroyAllWindows()

Alternatively, as frame decoding is the most time consuming task you can move it to the second thread and use a queue of decoded frames. See this link for details.

The third approach is to separate grabbing and decoding process and simply decode every nth frame. That will result in displaying only a subset of frames from the source video but from the user perspective the video will be played faster.

import cv2

cap = cv2.VideoCapture('video.mp4')
i=0 #frame counter
frameTime = 1 # time of each frame in ms, you can add logic to change this value.
while(cap.isOpened()):
    ret = cap.grab() #grab frame
    i=i+1 #increment counter
    if i % 3 == 0: # display only one third of the frames, you can change this parameter according to your needs
        ret, frame = cap.retrieve() #decode frame
        cv2.imshow('frame',frame)
        if cv2.waitKey(frameTime) & 0xFF == ord('q'):
            break
cap.release()
cv2.destroyAllWindows()

Jupyter HTML Video playback speed

In Jupyter Notebook when you right click on video then you should see context menu and there you can change speed.

Jupyter Lab doesn't have speed in this menu.

If you want to set speed at start then you have to use playbackRate in JavaScript

from IPython.display import HTML

HTML("""
<video alt="test" controls id="theVideo">
  <source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4">
</video>

<script>
video = document.getElementById("theVideo")
video.playbackRate = 4.0;
</script>
""")

The same way you can also create buttons to control speed.

from IPython.display import HTML

HTML("""
<button id="speed_4.0">Speed 4.0</button>
<button id="speed_0.5">Speed 0.5</button>

<hr>

<video alt="test" controls id="theVideo">
  <source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4">
</video>
    
<script>
video = document.getElementById("theVideo");
//video.playbackRate = 4.0;

document.getElementById("speed_4.0").addEventListener("click", function(){ 
    video.playbackRate = 4.0;
});

document.getElementById("speed_0.5").addEventListener("click", function(){ 
    video.playbackRate = 0.5;
});
</script>
""")

If you put the same code in next cell then buttons may not works and you may have to use new IDs for buttons and video. IDs should be unique.

Maybe it would need some other code to automatically generate unique IDs in every cell.

In code I put URL to real video Popeye for President so everyone can test it.

How to change playback speed in LosslessCut?

You can change playback speed in LosslessCut. According to Help → Help and shortcuts:

j Slow down playback
l Speed up playback

How to adjust play speed of video on android?

Media player does not provide what you want.
You have to use some other android api.

check link. Speed Control of MediaPlayer in Android

Or you can use media player with PlaybackParams(added in 23 api)

https://developer.android.com/reference/android/media/PlaybackParams.html