Questions tagged [video]

Video is a modern form of media designed for the capturing, duplicating, and transmission of dynamic visual content. To enhance accuracy and relevance, it is advised to employ more precise tags in cases when needed. For instance, use [video-editing] for queries pertaining to the cropping and adjustment of video footage, [video-encoding] for inquiries on converting videos to different formats, and [video-processing] for questions related to manipulating video frames with filtering techniques.

What is the best way to execute the .playVideo() function in Youtube using jQuery?

Is it possible to embed a YouTube video and have it play immediately upon clicking using jQuery? I'm having trouble figuring out how to implement this with the live click function. Any suggestions? var youTubeVideo = '<object width="370" heig ...

jqueryvideoyoutube-api

broadcast a video file from a Node.js server to multiple HTML5 clients at the same time

After researching online, I have been looking for a way to simultaneously stream a video.mp4 to multiple html5 clients. Despite reading various tutorials, I haven't found the ideal solution using nodejs. Do you have any suggestions or alternative met ...

javascriptnode.jshtmlvideonpm

Can ffprobe (fluent-ffmpeg) be used to read a stream input in node.js?

I've been working with fluent-ffmpeg in my code to extract the audio/video duration. My specific requirement is to use a stream as my input source. As per the documentation provided at this link, ffmpeg('/path/to/file1.avi') .input('/path/to/file2.avi') ...

node.jsvideoffmpeg

Show segments of video stream on page using node.js

I am currently exploring Node.js and trying to understand how streams work, so please bear with me if I seem a bit unclear. After reading some beginner notes on streams, I decided to test it out. In my project files, specifically in public/images/videos/S ...

javascriptnode.jsvideostream

What are the steps to resize a YouTube embedded video?

I am currently attempting to use a YouTube video as the background for breadcrumbs on my website. However, I am facing an issue with setting the video width to cover the full screen. The image below shows that the video is displayed in the center of the if ...

htmlcssvideoiframeembed

Attempting to grasp the intricacies of HTML5/JS video playback quality

I've been diving deep into research on this topic, but I can't seem to find a straightforward answer to my specific query. My main focus is understanding the inner workings of how video players transition between different quality settings (480p, ...

javascripthtmlvideovideo-streaming

Video background mute feature malfunctioning

I've searched through numerous resources and reviewed various solutions for this issue, yet I still haven't been able to figure it out. Could someone please guide me on how to mute my youtube embedded video? P.s. I am a beginner when it comes to coding ...

javascripthtmlvideoyoutube-javascript-apimute

React video recording not displaying in the video element

I'm currently developing a React application that facilitates webcam interviews with candidates. As part of this process, candidates have the option to "Start Again" or "Complete" their interviews. One challenge I am facing is displaying the recorded ...

javascriptreactjsvideomaterial-uiwebcam

developing a multimedia player using HTML5

I'm attempting to create a dynamic video "collage" that showcases videos with different aspect ratios in a flexible grid layout. Each row should have videos of the same height, while filling up the horizontal space within a container. With known widths an ...

javascriptcsshtmlvideo

Tips on making sure video player controls are always visible on an HTML5 video player

Can anyone help me with my HTML video player? I am trying to make the control bar display always, instead of just when hovered over. Any suggestions? ...

javascripthtmljquerycssvideo

When scrubbing through videos, Chrome consistently throws a MEDIA_ERR_DECODE error

Encountering a MEDIA_ERR_DECODE error while scrubbing in Chrome on two different PCs. One PC runs Windows 7 with Chrome version 26, and the other runs Windows 8 with Chrome version 27. This issue occurs across all videos. When attempting to scrub on the v ...

htmlgoogle-chromevideovideo.js

Eliminate the horizontal overflow caused by the HTML video tag

I'm currently facing an issue with using a video as the background for a div on my website. The problem arises when I view it on a smaller resolution, causing overflow on the right side. I've been attempting to solve this without success... You can see th ...

htmlcssvideo

Bespoke Video Player using HTML5 with "Nerdy Stats" Feature

I have been given the task of creating a streaming video testing framework for internal metrics and measurement purposes. Essentially, I am looking to develop an HTML5 player that can handle streams and provide performance data related to: - Average Bitr ...

htmlvideo

Can HTML/CSS be used to specifically target handheld mobile devices?

I am looking to optimize my video display in HTML by only showing it on desktop browsers. The difference in bandwidth between desktop and mobile devices is affecting the performance of mobile browsers, so I want to target only desktop users. Is there a way ...

javascripthtmlcssvideomobile

Video with a personalized play button overlay

I'm currently facing an issue with adding text above a GIF on a video play button specifically for mobile devices. The custom play button is necessary because no mobile device supports video autoplay. I've tried various methods to display the tex ...

htmlcssvideotext

Adding event listener to a dynamically created video element

Could you provide any insight as to why I'm encountering an error message "Can't create event listener on null" when using the following code: var my; my.newVidObj = document.createElement('video'); my.newVidObj.src = "vid-source.webm"; my ...

javascriptjqueryeventshtmlvideo

`Prepare and load all materials in advance`

Question: On my page, I have a slideshow displaying images and videos. Before starting the slideshow, I want to ensure that all content on the page has loaded. Does $(window).load() verify if all content, including videos, has been loaded? Thanks in adv ...

jqueryhtmlvideoload

Using the cordova-plugin-file to access and play video files stored on an external SD

I am in need of assistance with displaying an image and playing a video file from the root directory of an external SD card in my Cordova wrapped HTML project. I couldn't find a suitable place to ask these questions on the GitHub page for the cordova-plugi ...

androidhtmlcordovavideocordova-plugin-file

Ensure HTML5 video fills window completely without any overflow

I'm currently developing a new open-source alternative to Plex and I am facing some challenges with the in-browser video player. My goal is to have the video player maximize its size within the window during playback, similar to what Chrome and Netfli ...

csshtmlvideoprimefaces

Achieve a full-width background video without adjusting the height, preferably without the use of JavaScript

I have scoured various sources in search of the answer to this question but have come up empty-handed. While I am aware that similar queries have been made before, please hear me out. I am interested in incorporating a video background on a website where ...

csshtmlvideo

Embed a video clip into an HTML webpage

I attempted to embed a video using HTML. I followed the player script instructions and added the necessary paths and scripts, but unfortunately, the video is not visible on the webpage. Instead, when clicking on the area where the video should be, it opens ...

htmlcssvideo

Display a text over a full-screen HTML5 video

Is there a way to display text on a fullscreen video in HTML? I have tried using absolute positioning for the text and relative/fixed/none positioning for the video, but it does not work when the video is in fullscreen mode. I also attempted to call the ...

javascripthtmlcssvideo

Building a custom HTML and JavaScript player to showcase multiple videos on a webpage

UPDATE: The solution has been discovered, shared, and marked as the top answer below. In the process of creating my portfolio website using HTML, CSS, and JS, I encountered a challenge regarding the addition of multiple videos on various pages. While fol ...

javascripthtmlvideohtml5-video

Align audio and video elements in HTML5 using JavaScript

I am facing a situation where I have two files - one is a video file without volume and the other is an audio file. I am trying to play both of these files using <audio> and <video> tags. My goal is to make sure that both files are ready to pla ...

javascripthtmlaudiovideo

Revolutionize iPad user experience with seamless HTML5 video integration

What is the most effective method for dynamically embedding HTML5 video to ensure compatibility with the iPad? (using pure Javascript) I'm having difficulty getting this approach to work: <div id="placeholder"><script type="text/javascript" src= ...

javascripthtmlipadvideoembed

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

javascripthtmlnode.jsvideoheader

Using PHP and ffmpeg to upload and store videos on the internet

Currently, my website features a functionality that enables users to upload videos onto it. Following the video uploads, I aim to showcase them via a flash player. One prominent flash player I am aware of is flowplayer; however, if there are better alter ...

phpvideovideo-streaming

Transforming video files into HTML5 ogg/ogv and mpg4 formats

Is there a reliable software out there that can effectively convert video files (such as avi, flv, etc.) to HTML5 supported ogg/ogv and mpeg4 formats? I have tested a few options but unfortunately none of them seem to get the job done correctly. ...

videohtmlmpeg

"Comparison: Utilizing HTML5 Video Player with IE8 Embed Fallback versus Implementing Fixed

This dilemma has me at my wit's end. In an HTML5 Video element, I've included an mp4, ogg, and an embedded mp4 fallback. However, on the embed fallback in IE8, all my attempts to position the fixed element (#fixed) above it with z-indexing have f ...

csshtmlvideoembedcss-position

Node.js and Express: Delivering Seamless Video Streaming via HTTP 206 Partial Content

Having a binary file like an mp4 video in a MarkLogic database, I am utilizing the Node.js API of the database to stream this document in segments. The structure is as follows: html document <video controls="controls" width="600"> <source src= ...

javascriptnode.jsexpressvideomarklogic

I want to create a feature where a video will automatically play when a user clicks on a specific item in a list using Angular

Currently, I'm working on a project that involves displaying a list of videos and allowing users to play them in their browser upon clicking. The technology stack being used is Angular 2. Below is the HTML code snippet for achieving this functionality: & ...

javascriptangularvideotypescript

Unusual behavior in ReactJS and HTML5 video player observed

I currently have two React presentation components that include HTML5 video tags. The first component, named Homepage, is as follows: export default class Homepage extends React.Component { render() { return( <div className="Homepage"> ...

htmlreactjsvideo

Assistance needed for uploading videos using MySQL database and PHP code

Currently, I am in the process of writing PHP code that will be used to both upload and display a Quicktime .mov file by interacting with MySQL. While I have had success with working on similar tasks involving image formats in the past, this particular cir ...

phpmysqlvideofile-uploadlob

Watch an Instagram video retrieved from a public API and enjoy the content!

I've been exploring solutions on SO for displaying Instagram videos using the public api ?__a=1 method. While I came across a helpful question that pointed me in the right direction, I still faced some challenges. Once I retrieve user media, I check in my ...

vue.jsvideoinstagram

Guide on utilizing ffmpeg in conjunction with PHP for file compression and uploading

Hello everyone, I have successfully installed ffmpeg on my local computer and now I'm looking to learn how to use it for uploading files via PHP to the server. My goal is to convert all user-uploaded files to SWF format. Additionally, I've increased my upl ...

phpvideouploadffmpeg

Unable to Preview jQuery Video in Div After PHP Validation, But Image Preview Works Fine

Successfully utilizing the code below (with variations in IDs, etc.), I am able to preview a banner image in a div after PHP validates the upload using AJAX. This process is working perfectly without any issues. However, I am encountering an issue when at ...

phpjqueryajaxvideopreview

Exploring the issue of $scope variable changes not reflecting in ng-show elements in AngularJS

I am in the process of creating a website that includes a video element. For those interested, here is a link to the code for my page on Plunker: http://plnkr.co/edit/5NUnZ2KET1apWwxMxjex?p=preview The video on the website utilizes the html5 video tag, a ...

javascriptangularjsvideo

Overlaying div above vimeo player

I'm attempting to overlay a div on top of a Vimeo video, a task I anticipated would be straightforward but turns out to be more complex than expected. Below is the HTML code snippet: <div id="wrap"> <iframe id="video" s ...

htmlcssflashvideo

Mobile device accessing a video file twice in a row

Currently, I am in the process of developing my own DRM solution for video content. Each time an access is made to the actual video file, it goes through a verification process. For example, instead of streaming video.mp4 directly, it first passes through ...

htmlvideomobile

Node.js for Streaming Videos

I am currently working on streaming video using node.js and I recently came across this helpful article. The setup works perfectly when streaming from a local source, but now I need to stream the video from a web source. However, my specific requirement i ...

javascriptnode.jsvideostreamingvideo-streaming

Video Background, Adjusting Scale to Fit Height and Cropping Width as Necessary

Forgive me if this question has already been posed, but my search through various related discussions has not yielded the exact solution I'm looking for. My dilemma involves a 1280x720 video that I want to use as the background on my webpage. I need ...

htmlcssvideo

Trouble with HTML5 videos not functioning on Apple iOS gadgets

Having trouble playing my HTML5 videos on iOS devices, specifically iPhone 7.0 and iPad 7.0.4. Currently experiencing an issue where the iPad shows only an empty container and the iPhone displays a play button with a line through it. Any thoughts on what m ...

iosiphonehtml.htaccessvideo

What is the best way to focus the video on its center while simultaneously cropping the edges to keep it in its original position and size?

I'm trying to create a special design element: a muted video that zooms in when the mouse hovers over it, but remains the same size as it is clipped at the edges. It would be even more impressive if the video could zoom in towards the point where the curso ...

javascripthtmlcssvideozooming

The issue at hand is that one of the JavaScript buttons is functioning properly, while the other is not playing the video as intended. What steps can

I've been working on a script for my school project website that should make buttons play videos, but I'm running into an issue where it only works for the first button (btn). Programming isn't my strong suit, and I put this together based o ...

javascripthtmlcssvideo

Error encountered when Jest is testing the rendering of a landing page that contains a video component set to autoplay

I'm working on a landing page in React that features an autoplay video upon loading. However, I encountered an error while running tests: console.error Error: Not implemented: HTMLMediaElement.prototype.play This is the test code that caused the er ...

reactjsvideojestjs

Ways to verify audio in several HTML5 video files

I am working on a way to determine if multiple videos have audio or not. Here is an example of what I have so far: https://jsfiddle.net/hrd4a0c3/ However, my current solution only checks one video at a time. I am looking for a way to extend this functiona ...

javascripthtmlaudiovideo

script to pause video using jQuery

I have a script that works perfectly, but currently it only stops an instance of a playing video if a new video is started. I want to modify the script so that ALL instances of playing videos are stopped when the function stopAllButMe(); is called. Can s ...

javascriptjqueryhtmlvideo

Video with dynamic sizing doesn't adapt properly

I successfully achieved my main goal, which was to have a background video at the top of my page. However, I am facing an issue with making the video responsive. Currently, as I decrease the screen size, the video shrinks in both width and height rather th ...

htmlcsstwitter-bootstrapvideoresponsive-design

When viewing super-sized (local) files in Chrome(ium), HTML5 video doesn't display images

I am currently developing an Electronjs application that requires playing very large videos stored on the user's machine. I have experimented with using both the vanilla HTML5 video tag and other players. Interestingly, small videos load and play without a ...

htmlvideoelectronchromiummp4

Enhance the user experience with a personalized video player interface

I am facing difficulty in creating a responsive video with custom controls. While I understand that using a <figure></figure> element and setting the width to 100% makes the video responsive, I am struggling with making the progress bar also r ...

javascriptcsshtmlvideo

HTML5 video player with secondary playlist

Looking for a videoplayer setup where there are two playlists, but only one can play at a time. When choosing a video from the first list initially, nothing happens. However, after selecting a video from the second list, the first list starts working. HTM ...

javascripthtmljqueryvideo

Combine video using ffmpeg (or similar tools) while incorporating additional elements (such as overlays)

I am currently in the process of scraping clips from Twitch and combining them into a single video file. I have successfully managed to scrape Twitch clip links, but I am only able to get 16-20 videos due to the need to scroll with Selenium. While this is ...

pythonseleniumvideoffmpegwatermark

Using separate video sources for mobile and desktop devices causes issues

I am currently seeking a solution that allows me to play two different video files on each device (desktop and mobile). I have created a function using react hooks that determine whether the viewport is desktop or mobile. Below is the code snippet for the ...

reactjsvideonext.js

Leverage node-video-lib alongside buffer functionality

I'm exploring how to utilize the library node-video-lib for retrieving information about a video received on the server. However, the documentation only provides examples of working with files from the file system: Here is an example from the documentatio ...

node.jsnpmvideoreadfilevideo-library

incorporating video content onto a webpage

Let me provide more details for better understanding. Currently, the website is not operational yet. Once it's live, I'll be hosting it on a platform like YouTube. The issue I encountered was when trying to embed a video using the code below: <video w ...

htmlvideophotos

Is there a way to stop all HTML5 videos except for the one that I want to watch?

On my webpage, I have three HTML5 videos all on one page. My goal is to be able to pause or mute all the videos at once, except for the one that I specifically choose. Initially, I tried using an event listener on the parent div which worked well when clic ...

jqueryhtmleventsvideoaddeventlistener

Is it acceptable for a video to autoplay even if it is not connected to the DOM?

Consider the following three scenarios: document.adoptNode, document.importNode, and document.createElement with assigned properties. In all cases, the video autoplay feature is activated even when it's not connected to the DOM. This behavior differs fr ...

javascripthtmlvideo

Preserve the video's aspect ratio within a fixed height and width layout by utilizing CSS styling

I am currently in the process of developing a web application with a fixed height layout that does not utilize flexbox and is also limited by width constraints. My goal is to divide the screen in half both vertically and horizontally, around 50% for each ...

csshtmlvideoresponsive-design

Unfortunately, Safari and iOS do not support the video functionality

I am encountering an issue with my HTML5 sample video not loading in Safari 11 on OSX, but working perfectly fine in Chrome and Firefox. Additionally, the video is not functioning on iOS at all (neither in Safari nor in Chrome). Below is the HTML code: & ...

djangohtmlvideosafarihttp-headers

Firefox 44 experiencing issue with HTML 5 Video playing sounds unexpectedly

There has been an unusual observation of Firefox playing the sounds of all embedded videos on a page, even when the elements themselves are not actively playing. Clicking play on the video controls triggers new sound and video playback to start. All video ...

javascriptfirefoxvideo

Caching HTML5 videos in Google Chrome

I am currently in the process of building a website and have successfully added an HTML5 video. However, I encountered an issue when attempting to change the video file in the background for users to upload a new one. Despite updating the video URL, Chro ...

javascripthtmlgoogle-chromecachingvideo

A guide on selecting a video with Selenium

I'm a newcomer to the world of coding with Python and its libraries, as well as being new to Stack Overflow. I apologize if I seem unfamiliar with some things. Now, onto my question. I am attempting to write a script that can automate playing a video ...

pythonseleniumvideo

What is the best way to click in Selenium while dealing with autoplay videos?

Currently, I am working on a Java code in Eclipse that involves using Selenium to find and download Instagram Stories of a user onto my computer. While I have successfully been able to download all the photos from the stories window, I have encountered sev ...

javaseleniumvideoinstagrampause

What is the best way to access a video stored in a local file on the initial page and then watch it on the subsequent

I recently encountered a scenario where I needed to select a video on one page and have it automatically play on another page without any redirection. The initial page displays a list of videos for selection, like this: FirstPage Once a video is chosen on ...

javascriptphphtmlvideo

Click to start viewing the video

I'm attempting to have a video play when clicked, either on the video itself or around the video. There are multiple videos on the page and I've tried various solutions including the script below which didn't work. $('video').click(function(){ ...

javascriptjqueryvideo

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Is it possible to display the HTML video poster at the end of the video without relying on jQuery or JavaScript?

I have a webpage with multiple informational videos, using basic HTML/CSS player markup without any Javascript/jQuery knowledge. After a video is played or paused, the poster image does not reappear. Is there a way to recall the poster within the simple HT ...

htmlvideohtml5-video

Utilizing Angular for Webcam Integration

After trying out this code snippet: <video autoplay playsinline style="width: 100vw; height: 100vh;"></video> <script> navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } }) .then(stream => documen ...

htmlangulartypescriptvideogetusermedia

Delivering Background Videos with Node.JS

Apologies if my question seems off base or confusing, as I am not very knowledgeable in the world of nodejs. I have been comfortable using just plain PHP and Apache for a while until I discovered ZURB Foundation's stack with Handlebars and SASS, along with ...

javascriptnode.jshtmlvideobackground

How to make an entire video clickable on Android for seamless playback?

I have implemented an HTML5 video in my mobile web application. Currently, users need to click the small play icon at the bottom left of the video to start playing it. Is there a way to make the entire video clickable so it plays when clicked anywhere on t ...

javascriptjqueryhtmlvideomobile

Ensure your HTML5 videos open in fullscreen mode automatically

I managed to trigger a video to play in fullscreen mode when certain events occur, such as a click or keypress, by using the HTML 5 video tag and jQuery. However, I am now looking for a way to have the video automatically open in fullscreen mode when the p ...

javascriptjqueryhtmlvideohtml5-video

Unable to dynamically display an HTML5 video using JavaScript

I'm facing an issue with displaying videos in a modal dynamically. Here's the scenario: +------------+---------+ | Name | View | +------------+---------+ | 1.mp4 | X | | 2.mp4 | X | +------------+---------+ The X buttons re ...

javascripthtmlvideo

Implementing a video pause event trigger from a function in Angular2

Here is the content of my player.component.html: <video width="320" height="240" autoplay autobuffer [src]="videoSrc" (ended)="videoEnd()"> Your browser does not support the video tag. </video> <button (click)="pauseOrPlay()">pause/play ...

angulareventsvideotypescript

Troubleshoot: Why is my Google Chrome not playing videos? Uncover the solution with a

I have created a webpage with an HTML video tag that loads dynamically from a JSON file. I am currently using Chrome 50 for this project. The response is successful, and when inspecting the page using Chrome's developer tools, I can see the video tag prese ...

javascriptjsonhtmlgoogle-chromevideo

Creating thumbnails with ffmpeg from a live stream in a Node.js environment

Utilizing node.js alongside ffmpeg to capture an rtmp-stream and convert it into m3u8 format. [ '-y', '-fflags', 'nobuffer', '-analyzeduration', '1000000', '-i', 'rtmp://localhost:1935/live/ANMZJ2ZRUiMhKaAoygRXwAfHe', '-c:v', 'copy', '- ...

node.jsimagevideoffmpegthumbnails