We Keep Coding

How to display mp4 file format with Nextjs?

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

issue with getting video source from javascript

I am trying to get sources of videos through javascript. The code below is working fine. However it only works for one video only, if I was to add the same code for multiple videos, none of the videos work. I am using video.js as the main player for videos.
html:
<source id="01" src="" type='video/mp4'/>
JavaScript:
document.getElementById("01").src="link";

You absolutely need to reload the video after changing the Source. I give you an exemple with jQuery
var video = document.getElementById("01");
$(video).attr('src', "newlink.mp4");
video.load();
But you can achieve it without jquery
var video = document.getElementById("01");
video.src= "newlink.mp4";
video.load();

You have to use the videojs API to change the source:
videojs('YOUR_PLAYER_ID').src("/path/to/newlink.mp4")
This will work for flash and HTML5

whats the best idea to play several music in same html5 audio player?

I want to make a player like winamp by html5 audio player. but when I click a javascript button('play' button which is used for onclick event to call functions to change the audio source and play music) then sometimes the source doesn't load in time.
my code is:
<script type="text/javascript">
function play(src){
document.getElementById('new').currentSrc=src+".ogg";
document.getElementById('new').play();
}
</script>
<audio id="new">
<source src="m.ogg" type="audio/ogg" />
Your browser does not support HTML5 audio. Please upgrade your browser.
</audio>
<button onclick="play('source');">Play next song</button>
and another problem is there always an initial src need to keep there(like m.ogg).otherwise the new source doesn't load. but if I change innerHTML of 'new' audio player then this problem doesn't happen but its little slow to load.
so whats the best practice for this ? changing the current source or changing the innerHTML of the audio player?
-thanks.

Try calling
document.getElementById('new').load();
before calling play().
IIRC this will attempt to play as soon as enough data has buffered.

Phonegap Build, HTML5 Audio, Android

I'm developing this app for a local radio as part of community outreach type deal for my company (placement student) i kinda threw myself in at the deep end and decided to go with building this website -> app with only a tiny knowledge of the technologies i'm using however it's working quite well at the moment i'm just having a problem with the following.
So basically i'm trying to stream some audio using html audio tags. This works in my browser but not in my emulator (ripple emulator, nexus 4) nor on my android phone (HTC One).
Technologies - HTML5, CSS, Jquery Mobile and Phonegap Build.
I feel like i probably have to do something with Javascript.
<audio controls>
<source src="http://195.10.228.6:8035/canal.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Thanks for any help!
EDIT: to clarify i am able to see the audio player and also interact with it, it either just won't play sound or it doesn't play the stream not entirely sure.

<audio id="stream" preload='none'>
<source src="audio source" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
play!
<script>
var stream = document.getElementById('stream'),
ctrl = document.getElementById('audioControl');
ctrl.onclick = function () {
// Update the Button
var pause = ctrl.innerHTML === 'pause!';
ctrl.innerHTML = pause ? 'play!' : 'pause!';
// Update the Audio
var method = pause ? 'pause' : 'play';
stream[method]();
// Prevent Default Action
return false;
};
</script>
This code fixes most things it will allow you to play through your phone and also only has a play/pause link. you can do any styling you wish later on.
problems-takes about 10seconds prior to clicking play to load ~ atleast for my stream anyways for local files probably alot easier

You need to include more sound formats, as the MP3 isn't probably supported. According to http://html5please.com/#audio you have to include at least OGG and AAC formats.
Also beware that Opera Mini does not support the audio tag at all. You should include a polyfill, some were mentioned in the first link (http://html5please.com/#audio).

Have you looked into adding your external site to the config.xml whitelist?
Documentation for this is available:
http://docs.phonegap.com/en/2.7.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide

Unable to pause videojs on load if autoplay is enabled

this is my first question in stackoverflow so pardon me for mistakes.
I've been trying to create a simple CMS using videojs in which user could upload their video and customize their attributes (eg: autoplay, loop and controls).
When they change the attributes I will automatically recreate the whole tags and reinitialized it. I did this so it gave the correct preview especially on firefox since user will upload mp4 and firefox will give the "not supported" warning sign if I did not reinitialize it (videojs will automatically converts into flash).
Now the problem is when user checked the "autoplay" attributes because when I initialize the video it will automatically plays and I don't want that kind of behavior in the CMS (though I want that behavior in the published site).
I've been trying to pause the player once it was ready but it still plays.
My hypothesis is that the command to pause was fired before the command to play from the autoplay attributes.
This is the html tag used for this
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>
And this is the one I used to initialize and pause the video
_V_(example_video_1).ready( function() {
var myplayer = this;
myplayer.pause();
});
Any idea? Help is greatly appreciated. Worst case if all else fails I could use different tags for the preview and published site (no autoplay for the preview). I create a fiddle for this : http://jsfiddle.net/F8JhL/2/
EDIT: I noticed that sometimes the pause event really works though not automatically (about 1 to 2 second after the video plays) but more often it doesn't work at all.

I find the same issue when using version 4.1.0 of videojs. When I upgrade to version 5.1.0 this conflict is missing.
You could download the latest version at https://github.com/videojs/video.js/releases
So I think this bug has been fix (but I can't find the commit revision for this fix).