I am using video tag on my website. It works with every major browser, but I am running into issues with Firefox.
When I tap on the play button video scrolls to the end of video!
In order to start the video I need to rewind video to position other than start and than click on play.
Weird.
I tried to set initial position of video to 1s but it didn't help.
I still need to scroll it manually.
Any help will be appreciated.
Thank you
<video width="80% height="80%" controls id="video1">
<source src="videos/<cfoutput>#getVideo.URL#</cfoutput>.mp4" type="video/mp4">
<source src="videos/<cfoutput>#getVideo.URL#</cfoutput>.ogv" type="video/ogg">
<source src="videos/<cfoutput>#getVideo.URL#</cfoutput>.webmhd.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Javascript:
V I D E O */
function setupVideo(){
if(!myVideo){
console.log("Setting up video");
myVideo=document.getElementById("video1");
timeElapsed = 0;
timer;
myVideo.addEventListener("play",videoStarted,false);
myVideo.addEventListener("pause",videoPaused,false);
myVideo.addEventListener("loadeddata",videoLoaded,false);
console.log(" Video Element is: "+myVideo);
}
else{
console.log("Video Was Already set");
playPause();
}
}
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function videoLoaded(e)
{
console.log(" Video Loaded ");
myVideo.currentTime = 1;
}
function videoStarted(e)
{
console.log("Video Started");
//start the timer
timer = setInterval(videoPlaying,1000);
}
function videoPlaying(){
timeElapsed ++;
console.log("Video Playing "+myVideo.currentTime);
if(Math.ceil(myVideo.currentTime)== 10)
{
console.log(" it reached 10 now display quiz");
playPause();
}
}
function videoPaused(e)
{
clearInterval(timer);
console.log("Pause");
}
Your WebM or OGV video may have negative or invalid timestamps. Some software produces video that starts at a time slightly less than zero, particularly if the audio and video frames are not aligned to start at the same time. (That is, the video may start slightly before 0 and the audio may start at 0.)
If the video is produced with ffmpeg, try using the option -avoid_negative_ts 1.
If you have the mkvtoolnix package installed you can view the timestamps in a webm file with the command mkvinfo -s file.webm.
Related
Using dash.js player -- when video buffers I have to show a notification please reload video. when I am using this 'BUFFER_EMPTY' this event is hitting when the video loads for the first time. I don't want this event to hit first time of load.
if (x.Url !== null) {
var video,
player,
url = x.Url
video = document.getElementById('livevideo' + x.ChannelId);
player = dashjs.MediaPlayer().create();
player.initialize(video, url, true);
player.on(dashjs.MediaPlayer.events["BUFFER_EMPTY"], function (e) {
Notification.error("Player error, please reload..");
$scope.isPlayerError = true;
});
else {
Notification.error("Channel-" + x.ChannelId + " URL not received (or) device offline.");
}
I have a big problem when making a screen share demo between chrome browser depends on WebRTC.
Environment:MacBookPro macOS 10.13.3, chrome: 64.0.3282.119
In order to get screen media sourceId, I also make a chrome extention, the background-script.js code as follows:
var screenOptions = ['screen', 'window'];
......
chrome.desktopCapture.chooseDesktopMedia(screenOptions, port.sender.tab, onAccessApproved);
When get media sourceId in my html javascript, a request screen media as follows:
var constraints = {
video: {
mandatory: {
chromeMediaSource: 'desktop',
maxWidth: 1280,
maxHeight: 720,
maxFrameRate: 30,
minAspectRatio: 1.77,
chromeMediaSourceId: sourceId
}
}
};
navigator.mediaDevices.getUserMedia(constraints).then(gotLocalStream).catch(function (e) {
alert('getUserMedia() error: ' + e.name);
});
The problem comes: when I inspect WebRTC stats in chrome://webrtc-internals, I found the googFrameRateInput was very low (<=10) when I play a video in main display, while googFrameRateInput can reach 30 when a do nothing in main display.
googFrameRateInput
I also try this in windows chrome, googFrameRateInput can reach 24~30 even when play a video.
Why googFrameRateInput is too low in mac chrome?
Thank a lot.
Updating electron 6.0.2 solved the issue.
In my project I have a video displayed. On top of the video there is a canvas where some object are drawn. Therefore the video is overlayed with some drawings. Now I want to download the video file including the drawings.
I am using the webrtc mediaRecorder.
I am drawing the video to a canvas on window.requestAnimationFrame. My exported video looks good but there is no audio from the video because I captured the canvas. Is it possible to capture the audio from the video and add it to the canvasStream?
I also recorded the videostream including the audio but then I dont have my drawings on top of it. Any suggestions?
You need to create new MediaStream with input stream AudioTrack and Canvas Video Track.
Then record the new Stream, so the recorder output(blobs) will contains both audio and video.
var options = {mimeType: 'video/webm'};
var recordedBlobs = [];
var newStream = new MediaStream();
newStream.addTrack(inputStream.getAudioTracks()[0]);
newStream.addTrack(canvasStream.getVideoTracks()[0]);
mediaRecorder = new MediaRecorder(newStream, options);
mediaRecorder.ondataavailable = function (event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
mediaRecorder.start(1000);
See my demo.
I'm using the <audio> tag to play audio files across a number of browsers.
var audioTag = document.createElement("audio"),
sourceTag = document.createElement("source"),
sorryTag = document.createElement("div");
sorryTag.innerHTML = "This filetype not supported";
audioTag.onerror = function() {
//some error handling code
}
sourceTag.onerror = function() {
/some error handling code
}
sourceTag.src = "myfile.mp3";
audioTag.appendChild(sourceTag);
audioTag.appendChild(sorryTag);
//add audioTag to DOM
This leads to
<audio>
<source src='myfile.mp3' />
<div>This filetype not supported</div>
</audio>
Firefox can't play MP3 files, and I'm OK with that. Mozilla also promises that an error event will be dispatched if the <audio> or <video> tag can't play the media. And also it will go through the tags nested inside the media tag one by one (<source> or others, the last presumably being an error message) till it finds one it can work with. None of these seem to work for me; the error event is never fired on the elements nor is the error message displayed. What am I doing wrong?
The workaround I found was:
var audioTag = document.createElement("audio"),
sourceTag = document.createElement("source");
//Add error event listeners for browsers other than FF
audioTag.onerror = function() {
console.log("file can't be played. error from audio tag");
}
sourceTag.onerror = function() {
console.log("file can't be played. error from source tag");
}
//The only way to tell that file failed to play on FF
//Timeout is because audioTag.networkState === audioTag.NETWORK_NO_SOURCE
//on IE till it starts downloading the file
setTimeout(function() {
if(audioTag.networkState === audioTag.NETWORK_NO_SOURCE) {
console.log("this hack is only for <audio> on FF.");
console.log("Not for <video> and on no other browsers");
}
}, 3000);
sourceTag.src = "<file_url>";
audioTag.appendChild(sourceTag);
Basically, create the media and source tags, add error handlers, then append the source tag to the media tag and if the error event fires, then you know the file is unplayable.
On FF, the error event doesn't fire and you have to rely on the networkState flag of the <audio> element, comparing it to NETWORK_NO_SOURCE. You can't inspect it immediately after setting the src attribute of the <source> element because on IE networkState === NETWORK_NO_SOURCE till the browser actually starts downloading the file. For this reason, set a timeout of about 3 seconds (it's not an exact science) before checking the flag value and there's a good chance that you will have given IE enough time to determine if it's capable of playing the file.
UPDATE
Wrote a test case for this: http://jogjayr.github.com/FF-Audio-Test-Case/ but the error event fires OK there. Guess I was wrong; that or it was broken on FF14 (which I was using at the time), because the error event fires OK in my application too. Thanks #BorisZbarsky
Does anyone have a URL of a successful multivideo gallery using mediaelement.js where the same instance of MediaElementPlayer is reused and have it working with the Flash fallback for IE8 & 7?
I have partial success changing the setSrc as a function after the new MediaElementPlayer is created for the first time. This is robust for the HTML5 component but failing for the flash fallback. setSrc is consoling as not available in IE8 & 7. It fails to recognise the object.
Moving the setSrc to the "success" part of the new MediaElementPlayer does load the Flash fallback and HTML5 video as expected. On attempting to change the source of the player I have attempted to "destroy" and recreate the MediaElementPlayer object on the fly without success. I have not declared player using var=player so reasonably have expected to delete it but without success:
player = false;
delete player;
//make a new instance of the mediaelement video player
player = new MediaElementPlayer('#videoPlayer', {
pluginPath: ''+basePath+'_Includes/JS/',
success: function (player, node) {
//set the size (for flash otherwise no video just sound!)
if($("#rg-gallery.smallGallery").length > 0){
player.setVideoSize(400, 225);
} else{
player.setVideoSize(640, 360);
}
player.setSrc([
{ src: mp4, type: 'video/mp4' },
{ src: webm, type: 'video/webm' }
]);
player.load();
player.pause();
//if the video plays stop the slideshow
player.addEventListener('play', function () {
videoPlaying.push('playing');
stopSlideshow();
}, false);
}
});
Research both here and on the web shows that others are attempting to try this type of dynamic gallery but I am unable to find an example that shows it as technically viable.
Any example URLs where someone's cracked it would be lovely. Thanks :)
Solved.
Created a JS variable of video code:
var playerView = '<video width="640" height="360" id="videoPlayer" class="video-js vjs-default-skin" poster="" controls preload="auto"><source id="mp4" type="video/mp4" src="" /><source id="webm" type="video/webm" src="" /></video>';
On initialization removed any DOM rendering of any existing player, set it to false and deleted it:
//remove any existing video player
$(".mejs-container").remove();
player = false;
delete player;
Appended new video view to DOM:
//add a new one
$(".rg-video").append(playerView);
Created new instance of player and set src and load as normal:
//make a new instance of the mediaelement video player
player = new MediaElementPlayer('#videoPlayer', { ...
HTML5 video and Flash video fallback for IE8 & 7 now working as part of dynamic mixed media gallery.
Off for tea and medals.
:)