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 any issue, but when it comes to larger ones (1GB and above), only the sound plays, and no images are displayed.

<video controls width="1280" height="720">
  <source src="F:\sample.MP4" type="video/mp4" />

  Sorry, your browser doesn't support embedded videos.
</video>

This problem occurs both within the Electron app itself (which is Chromium-based) as well as in Chrome. However, Edge has no trouble playing these large videos.

Despite my efforts, I have not been able to find any documentation explaining why this might be happening, or if there are compatibility issues with Chrome and certain video formats...

Could anyone point me in the right direction for finding a solution?

Thank you

Edit: A breakthrough! The issue wasn't actually related to the size of the videos, but rather the codec used. Videos encoded with h264 played fine, while those with hevc (h265) did not work properly

htmlvideoelectronchromiummp4

Answer №1

@snwflk discovered the solution within the comments section. It appears that the reason for this issue is due to the lack of support for the HEVC codec in Chrome: https://caniuse.com/#feat=hevc

Interestingly, Edge seems to have resolved this problem by delegating video decoding to the hardware: H.265/HEVC web browser support

Could it be possible to customize Electron so that Chromium also accommodates this feature?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for incorporating a button to the left of the search field?

Is it possible to enhance the search field by adding a button to make it more user-friendly? Below is the code I have been using: <div id="search"> <div class="container"> <h1>Search U.K. house price data</h1> <form c ...

htmlcsstwitter-bootstrap

Issue with the execution of Javascript code. Edit required

After creating a registration form that allows users to input their information for registration, I encountered an issue where if certain fields were left empty or if the user name was unavailable or the email address was already registered, a warning mess ...

javascripthtml

Can a mobile device be programmed to automatically bring up the keyboard for the autofocus element?

Currently utilizing Meteor for my project and facing an issue with a "Add new" button. When clicked, the button disappears and is replaced by a text box. The toggle logic between the button and input is complex and not relevant here. Check out the HTML co ...

htmlmeteorautofocus

Enhance your HTML rendering with Vue.js directives

Check out this cool code example I created. It's a simple tabs system built using Vue.js. Every tab pulls its content from an array like this: var tabs = [ { title: "Pictures", content: "Pictures content" }, { title: "Music", c ...

javascripthtmlvue.jsvuejs2

Edit the contents within HTML strings without altering the HTML structure

If I have a string of HTML, it might look something like this... <h2>Header</h2><p>all the <span class="bright">content</span> here</p> I am interested in manipulating the string by reversing all the words. For example ...

phpjavascripthtmlstring

Arranging HTML components in Vue.js using v-for loop

Recently, I started using vue.js and I have a requirement where I need to display an HTML structure based on API data. The structure should look like this: <div class="row"> <div><p>text1</p><img src="{{imgurl1}}" /></di ...

javascripthtmlvue.js

Master the Art of Animating Letters in the DOM by Navigating Through Any Array of Characters

I am attempting to implement a typewriter effect animation where a new message is displayed and animated as I type into an input box. Initially, I tried using a global char variable to iterate through each element of the array. However, whenever I passed ...

javascripthtmldomiteratorclosures

What is the best way to locate a web element in Selenium using Python when it does not have an ID

I'm having trouble selecting an element on the minehut.com webpage that doesn't have an ID. Despite trying CSS Selectors, I haven't had any success. The element I want to select is: <button _ngcontent-c17 color="Primary" mat-raised-bu ...

pythonhtmlseleniumcss-selectors

Express causing textarea in http form to have empty req.body

Here is a form for users to upload a file and submit text: form(action='/createpost' enctype="multipart/form-data" method='post' id="imgForm") input(type='file' name='imgPath' size = "60") br textarea(na ...

javascripthtmlhttpexpresspug

Angular - Display shows previous and current data values

My Angular application has a variable called modelResponse that gets updated with new values and prints them. However, in the HTML, it also displays all of its old values along with the new ones. I used two-way data binding on modelResponse in the HTML [( ...

htmlangulartypescriptdata-bindingangular8

Guide to declaring variables using jQuery

Currently tackling a school project, I stumbled upon some online example solutions and managed to decipher most of the code. However, there is one line that has me puzzled. var $newTweet = $('<div class=tweet></div>'); My assumption ...

javascriptjqueryhtmlcss

Custom Native Scrollbar

Currently, there are jQuery plugins available that can transform a system's default scroll bar to resemble the iOS scroll bar. Examples of such plugins include . However, the example code for these plugins typically requires a fixed height in order to ...

javascriptjqueryhtmlcssslimscroll

Mastering the art of calculating the width for a responsive scroll menu

I found a useful tutorial on building a scrolling menu for smaller screen sizes. You can check it out here. However, I encountered an issue when trying to add a border width element. Whenever I define the width, it overrides the scrolling: auto; element. ...

htmlcss

Combining 2 divs harmoniously

I have a set of HTML div elements that are styled using the following CSS: div{ width:250px; height:250px; display:inline-block; border-radius: 10px; margin:10px; background:#2E2922; vertical-align:top; } In my HTML, these div ...

htmlcss

Issues with Skrollr JS on mobile device causing scrolling problem

Currently facing an issue with Skrollr js. It is functioning perfectly in web browsers and mobile devices. However, there seems to be a problem when tapping on a menu or scrolling down arrow as it does not initiate scrolling. Assistance would be greatly ...

javascripthtmlskrollr

In HTML, discover a sneaky way to conceal the video progress bar

I'm having trouble using webkit and it's not working for me #videoP::-webkit-progress-value { display: none; } #videoP::-webkit-progress-bar { display: none; } This is the code I have for my video in HTML <video id="videoP&quo ...

htmlcsshtml5-videoprogress-barwebkit

Disable or set input text to read-only in Internet Explorer 9 and earlier versions using JavaScript or jQuery

Can anyone offer any suggestions on how to accomplish this task? I attempted using JavaScript with the code below, but it did not yield the desired results. element.readOnly="true"; element.readonly="readonly"; element.disabled="disabled"; I also tried ...

javascriptjqueryhtmltextinput

Issue with Bootstrap checkbox buttons not rendering properly

I'm attempting to utilize the checkbox button feature outlined on the bootstrap webpage here in the "checkbox" subsection. I copied and pasted the html code (displayed below) from that page into a jsfiddle, and checkboxes are unexpectedly appearing in ...

htmlcsstwitter-bootstrap

Retrieving Files using Ajax Across Different File Types

I recently came across the following code snippet: DOM_imgDir = "img/UI/DOM/"; fileextension = ".jpg"; $.ajax({ url: DOM_imgDir, success: function (data) { $(data).find("a:contains(" + fileextension + ")").each(function () { filename = thi ...

javascriptjqueryhtmlajax

Attempting to eliminate an HTML element using JavaScript

Currently, I am working on creating an image rotator in JavaScript. The CSS fade animation I have applied only seems to work during element creation, so I am forced to remove the element on each loop iteration. The main issue I am encountering is related ...

javascripthtml