score:1
let say you have to get still image from the video below,
<video id="video" controls="controls">
<source src=".mp4" />
</video>
<button id="capture">capture</button>
<div id="output"></div>
use the following function to get the image from the video before it loads:
(function() {
"use strict";
var video, $output;
var scale = 0.25;
var initialize = function() {
$output = $("#output");
video = $("#video").get(0);
$("#capture").click(captureimage);
};
var captureimage = function() {
var canvas = document.createelement("canvas");
canvas.width = video.videowidth * scale;
canvas.height = video.videoheight * scale;
canvas.getcontext('2d')
.drawimage(video, 0, 0, canvas.width, canvas.height);
var img = document.createelement("img");
img.src = canvas.todataurl();
$output.prepend(img);
};
$(initialize);
}());
thanks to chris brandsma, i have used this on wordpress as custom code and made some changes according to my work, so you need to add some code to get random time based images. you can find this code on: tutorial code
Source: stackoverflow.com
Related Query
- Extract frames from specific times from video
- How do you extract a specific TypeScript prop type from a React component?
- How do I extract messages from multiple specific folders with FormatJS CLI?
- Get All The youtube video from specific channel in reactjs
- TypeScript conditional types: Extract component props type from react component
- Prevent React from re-rendering a specific child component
- how to import LESS files from specific path using webpack less-loader?
- Is there any way to update a specific index from the array in Firestore
- Extract CSS from SCSS and deferred lazy load in React app
- React wait for a specific response from API
- Next.js Opt out of Layout Component for specific pages from _app.js
- Is it possible to disable specific React warnings from Jest (using Create React App)
- Gatsby + Markdown: How to get data from a specific markdown file into a single page?
- Can't seek through video from Rails Active Storage with Rails-Webpacker React Frontend
- How to extract data to React state from CSV file using Papa Parse?
- Streaming video from OBS to rtmp server running on heroku and using node-media-server
- material-ui : Extract color from theme
- ReactJS - video stream from webcam not working
- How to play one video from array at a time in ReactJS & AG Grid
- How to remove a specific event listener from a react.js element
- Get a specific response header (e.g., Content-Disposition) in React from an ASP.NET CORE Web Api
- How do I return a json file from s3 to a specific url, but only that url
- How to deal with UseEffect running multiple times due to retrieval from Firestore DB?
- Reactjs onClick event how to select a specific button from a list
- How can I extract data from this returned object in an async function?
- Typescript: How to import specific component from react-bootstrap
- Adding key value pair (value from an array) to specific objects in an array
- Extract values from url using React
- How to correctly add and remove specific items from an array within state?
- Redux, React, MapStateToProps: Retrieve a specific element in an array from the redux state tree
More Query from same tag
- Using fetch API with mode: 'no-cors', can’t set request headers
- How to disable button using props in React.js?
- Only trigger UseEffect() in Material UI Dialog when it is in opened
- React JS - Live clock update
- Chat scroll to bottom when send a message using React
- How to use different CSS files for different page with react js
- redirect stubbed in react-router-dom
- Using Ant Design Variables in Styled Components
- Select with value prop inside of Form.Item won't reflect any change of that value prop
- React router params - failed page refresh on Apache server
- Dynamic pagination with Scroll in ReactJs
- React: Re-rendering a page when passing an id parameter in the url
- I am getting this error "Cannot read properties of undefined (reading 'map')" when i use map method in my react app
- Parsing error: The 'Link' identifier has already been declared
- TypeScript Error (TS2345) argument of type Person | undefined is not assignable to paramater of type Person
- "This method is only meant to be run on single node. 0 found instead" Enzyme error
- Docker Compose with React and Nginx
- How to set a type of a function's prop after destructuring?
- Firebase Bind and Unbind from State in React when using Re-base
- Array does not update with useState hook and for loop
- Make state related index make true while other state always false
- JavaScript & CSS scaffolding in Laravel 8.x
- How to re-use type in React & TS application
- how to mock useUser this custom hook using TypeScript
- How to get address based on lat lang lng in react google map
- What can I use in functional components to have same behavior as componentDidMount?
- React JS How to make some checkboxes checked, based on an array of checked values
- Update the Old and New Value in Redux
- React Performance Issues in Firefox?
- Typesense always returns "404 - Not Found"