I have the following code on my component and the video is stored under /public
<video autoPlay loop>
<source src="./video.mp4" type="video/mp4" />
</video>
I have the next.config.js as followed
module.exports = withPlugins( // I use next-compose-plugins
[
...some plugin
],
withVideos(nextConfig), // I use next-videos
)
I cant seem to have my video play at all, and I got the following error as 206 Partial Content. The file video I have is only 180kB.
Anyone know the solution to fix this?
The problem wasn't from Nextjs. The video works on Safari, but not Chrome and Firefox. The only thing I had to solve it is compress the video and allow the server to handle content range
Related
I am trying to get to the bottom of an issue on a 4th generation iPad issue we are having. We keep getting the following error and the page refreshes so there is no way to debug this in developer tools on a mac:
"A problem occurred with this webpage so it was reloaded"
The page uses fullpage.js and renders 22 separate html5 (mp4) videos that run in the background of each full page/section.
Weirdly, if we change the code to only render say 15 videos the page works fine!
The videos are between 500KB and 3MB each. The videos are 33MB in total.
They are embedded like this:
<video id="video-transport" class="video-bg">
<source src="videos/videoname.mp4" type="video/mp4">
<source src="videos/videoname.webm" type="video/webm">
<p class="vjs-no-js"></p>
</video>
Does anyone have any suggestions of what is wrong with the page? Is there some kind of upper memory limit or page size we are exceeding.
Is there an easy way of debugging this?
Thanks,
Phil
No idea why it's breaking, but...
Have you tried using the preload property for the videos to prevent loading them on page load ?
Related question
Or, if that doesn't workf for you, have you though a about using the fullpage.js lazy loading option the videos?
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
</video>
flowplayer html5 5.4.6
chome 35+
in flowplayer html5, on chrome i kept getting html5: video encoding not supported or html5: video not found.
I load flowplayer via javascript and have a playlist defined like so:
$(function () {
$('#fp').flowplayer({
playlist:[ [
{ webm: "/usermedia/update_sets/140704/videos/02-480p.webm"},
{ mp4: "/usermedia/update_sets/140704/videos/02-480p.mp4"} ] ],
splash: true
});
});
i checked the video format of the mp4 and all was well. I can even drag and drop the mp4 into chrome and it plays np.
in chrome dev tools i opened the network tab and can see that it tries to open the webm file, get partial content, then cancels the get get.
it never tries to load the mp4 file.
So i tried reversing the order so that mp4 was the first in the playlist.
voila. video plays no problem.
I also tested in firefox and it works without issue.
The question is, why does flowplayer html5 on chrome fail if webm source is specified first in the playlist?
='(
take a look here
i hope this helps you
the browser checks what works but it looks from top to bottom so if the first works for him he wil use it so change the order and it suppose to work
to give an example to you
<div class="flowplayer">
<video>
<source type="video/webm" src="http://example.com/intro.webm">
<source type="video/mp4" src="http://example.com/intro.mp4">
<source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>
now webm will go first,
if you change it to:
<div class="flowplayer">
<video>
<source type="video/mp4" src="http://example.com/intro.mp4">
<source type="video/webm" src="http://example/intro.webm">
<source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>
.mp4 go first.
I've got an audio file being played with the basic HTML5 audio tag:
<audio controls itemprop="audio">
<source src="http://mysite/mus/my_music_file.mp3" />
</audio>
I'm using Audio.js along with the audio tag for serving up a fallback flash version, as well as a nicely designed player.
In Chrome and Firefox, everything is working as it should, and it's showing the length of the track. Safari is showing: Infinity:NanNan in the spot where the song's length should be shown.
I did a search and found a few similar questions, but both seem to be talking about PHP headers? I'm not using PHP with my audio files, but it is within a Wordpress theme. Could that be an issue?
you should indicate the codecs, and not preload
<audio preload="none" controls>
<source src="/path/to/the/source" type="audio/mp3" codecs="mp3"/>
</audio>
So this is an odd issue I'm running into. I've only tested Chrome and Safari, both on Mac, and between those browsers the problem only manifests on Chrome.
I have a very basic HTML5 video element, which loads a video from my server, and the user has a few buttons onscreen to jump to specific times within the video.
When the video file is referenced as a direct link, e.g.:
<video id="thevideo" width="720" height="480">
<source type="video/webm" src="videos/vid102.webm" />
<source type="video/mp4" src="videos/vid102.mp4" />
<p>Your browser does not support this video.</p>
</video>
...it works just fine.
However, I've just set it up so the videos can be instead loaded via a PHP fpassthru, e.g.:
<video id="thevideo" width="720" height="480">
<source type="video/webm" src="getvideo.php?t=webm&v=166" />
<source type="video/mp4" src="getvideo.php?t=mp4&v=166" />
<p>Your browser does not support this video.</p>
</video>
where getvideo.php looks something like this:
<?php
$videoID = $_REQUEST["v"];
$videoType = $_REQUEST["t"];
$vidPath = "videos/video$vidFile.$videoType";
$fp = fopen($vidPath, 'rb');
header("Content-Type: video/$videoType");
header("Content-Length: " . filesize($vidPath));
fpassthru($fp);
?>
The strange behavior is this: On both browsers, the video loads and plays just fine. On Chrome, however, the version using the fpassthru PHP script breaks the ability to set the player's "currentTime" attribute and thus jump to somewhere in the video. If I call document.getElementById('thevideo').currentTime = 50, instead of jumping to the 50 second mark, it just stays where it is.
Any idea why this might be?
UPDATE:
I've seen some indications that this has something to do with Chrome specifically requiring the "Accept-Ranges" header to be provided in the response. I've added the header "Accept-Ranges: bytes" to the .php script's output, and I've made sure that the web server is allowing byte range requests, but still, it's not working.
You are correct about requiring the "Accept-Ranges" header, as part of HTTP Byte Serving. I suggest reading this answer to a similar question:
Seekbar not working in Chrome
Adding the response header is not sufficient. You have to also respond with the "206 Partial Content" status code and return only the requested range of bytes. It sounds like you're still returning the whole file. fpassthru will read back the file all the way to the end, so it looks like you're going to need to find another way to read the file.
I've got some trouble with the <video> element I guess. I have a little demo page where I'm running a video. That file is available in .webm, .mp4 and .ogv. The video is played properly in Firefox (10) mac+win, Safari mac, Chrome mac.
Neither the windows version of Safari nor Chrome plays/shows that video file (maybe a Webkit issue?). This is how the HTML code looks:
<video controls>
<source src="video/chicane.webm" type='video/webm; codecs="vp8, vorbis"'/>
<source src="video/chicane.mp4" type="video/mp4"/>
<source src="video/chicane.ogv" type="video/ogv"/>
</video>
I'm also using a .htaccess file to normalize MIME types, looks like
# Video
AddType video/ogg ogv
AddType video/mp4 mp4 m4v
AddType video/webm webm
Having a look into Chromes or Safaris developer tools (network tab), it looks like it chooses to play the .webm file, but it can't figure the mime type (shows undefined), plus it seems like it trys to access the files twice.
Have a look yourself:
http://www.typeofnan.com ("awesome tab")
I have no clue why it works fine on OSX with both browsers, if someone can spot an error on the site please let me know. At present, I do some feature detection and use Javascript to .play() the video. However, if I use the autoplay attribute on the <video> tag, Chrome at least plays the audio, but still no video at all.
Reference: Site source on github
Here's what I did to get it to work. Since the browser accepts the first video it can play, I put the WEBM version first and Chrome has no problem with it.
Have you tried to add codecs additional info into each <source> ?
Maybe WebKit cannot automatically recognize codec used to encode the video source.
// from html5rocks.com, see link on the bottom of answer
<video>
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
http://www.html5rocks.com/en/tutorials/video/basics/#toc-markup
It works on my machine : Windows 7 Family + Chrome 16.
What I did is that I opened the Developer Tools.
Then, I added the autoplay="autoplay" to the video tag. Next, I edited the html source tag related to the webm format so that I could have :
<source src="video/chicane.webm" type="video/webm; codecs=\" vp8, vorbis\"">
Maybe it was simply an escape problem (with the double quotes).
I wrote this markup from scratch using your video URLs, and it seems to work fine:
<video controls width="360" height="360">
<source src="http://www.typeofnan.com/video/chicane.mp4" type="video/mp4">
<source src="http://www.typeofnan.com/video/chicane.webm" type="video/webm">
<source src="http://www.typeofnan.com/video/chicane.ogv" type="video/ogg">
<span title="No video playback capabilities, please download the video below">Your video</span>
</video>
<p>
<strong>Download video:</strong> MP4 format | Ogg format | WebM format
</p>
See Video for Everybody.