I am working on a HD button, so I have to reload the video and play it when it stops. So first, I am trying to load the HD file.
I've already read a lot of things about changing the source of the video tag. My code is working with FireFox and Internet Explorer, but not with Chrome :
vjs.HdToggle.prototype.onClick = function() {
var mp4Vid = document.getElementById('mp4Source');
var webmVid = document.getElementById('webmSource');
var oggVid = document.getElementById('oggSource');
this.player_.pause();
$(mp4Vid).attr('src', './test.mp4');
$(webmVid).attr('src', './test.webm');
$(oggVid).attr('src', './test.ogg');
this.player_.load();
this.player_.play();
}
I don't know what I have to do to make it work with Chrome. Does somebody have an idea ?
Thank you, Lea.
You should use src() to update the sources.
this.player_.src([
{ type: "video/mp4", src: "/test.mp4" },
{ type: "video/webm", src: "/video.webm" },
{ type: "video/ogg", src: "/test.ogv" }
]);
https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#src-source-
You might also find this existing plugin useful: https://github.com/vidcaster/video-js-resolutions
Related
If i use the following code to record a canvas animation:
streamInput = parent.document.getElementById('whiteboard');
stream = streamInput.captureStream();
const recorder = RecordRTC(stream, {
// audio, video, canvas, gif
type: 'video',
mimeType: 'video/webm',
recorderType: MediaStreamRecorder,
disableLogs: false,
timeSlice: 1000,
ondataavailable: function(blob) {},
onTimeStamp: function(timestamp) {},
bitsPerSecond: 3000000,
frameInterval: 90,
frameRate: 60,
bitrate: 3000000,
});
recorder.stopRecording(function() {
getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
url = URL.createObjectURL(recorder.getBlob());
$("#exportedvideo").attr("src", url);
$("#exportedvideo").attr("controls", true);
$("#exportedvideo").attr("autoplay", true);
})
});
The video plays fine and i can seek it in chrome/edge/firefox etc.
When i download the video using the following code:
getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
var file = new File([seekableBlob], "test.webm", {
type: 'video/webm'
});
invokeSaveAsDialog(file, file.name);
}
The video downloads and plays fine, and the seekbar updates like normal.
If i then move the seekbar to any position, as soon as I move it I get a media player message:
Can't play,
Can't play because the item's file format isnt supported. Check store to see if this item is available here.
0xc00d3e8c
If i use firefox and download the file, it plays perfect and I can seek.
Do i need to do anything else to fix the Chromium webm?
i've tried using the following code to download the file:
var file = new File([recorder.getBlob()], "test.webm", {
type: 'video/webm'
});
invokeSaveAsDialog(file, file.name);
however, the file plays and i can move the seekbar but the video screen is black.
yet firefox works fine.
Here are the outputted video files:
First set were created without ts-ebml intervention:
1: https://lnk-mi.app/uploads/chrome.webm
2: https://lnk-mi.app/uploads/firefox.webm
Second set were created using ts-ebml:
1: https://lnk-mi.app/uploads/chrome-ts-ebm.webm
2: https://lnk-mi.app/uploads/firefox-ts-ebml.webm
both were created exactly the same way using ts-ebml.js to write the meta-data
recorder.addEventListener("dataavailable", async(e) => {
try {
const makeMediaRecorderBlobSeekable = await injectMetadata(e.data);
data.push(await new Response(makeMediaRecorderBlobSeekable).arrayBuffer());
blobData = await new Blob(data, { type: supportedType });
} catch (e) {
console.error(e);
console.trace();
}
});
is there a step I am missing?
Having tried all the plugins like ts-ebml and web-writer, I found the only reliable solution was to upload the video to my server and use ffmpeg with the following command
ffmpeg -i {$srcFile} -c copy -crf 20 -f mp4 {$destFile}
to convert the video to mp4.
I'm working on a website using jPlayer. The problem appeared when I tried to use it with my android phone, so I started recoding it. Now I'm trying to use the jPlayerAndroidFix class. I'm doing it just like in the example given in the source code in the tutorial, and still it's not working.
Here's the code:
function playSound(sound) {
if (playToggle) {
return;
}
var id = "#jplayer-play";
var media = {
mp3: sound
};
var options = {
swfPath: $('body').data('jplayer-swf'),
solution: 'flash,html',
wmode:"window",
supplied: 'mp3',
preload: 'metadata',
volume: 0.8,
muted: false,
errorAlerts: false,
warningAlerts: false,
customCssIds: true
};
var myAndroidFix = new jPlayerAndroidFix(id, media, options);
myAndroidFix.setMedia(media);
myAndroidFix.play();
}
Important thing to add - the audio is received dynamically, for example from a link:
http://granie.t-mobile.pl/sets/play/69986
and that's the "sound" variable.
What may cause the problem? What am I doing wrong?
The jPlayerAndroidFix class can be found in the source code of
http://jplayer.org/latest/demo-01-android/?theme=0
Before I go into the problem I would like to say that this is the first time I'm trying to write javascript using OOP. So please bear with me and guide me if I doing anything wrong.
As title says I am using HTML5 video to play videos in my application and here is the code which I wrote.
I have created an object Screens where I have a video tag.
var Screens = {
getVideoScreen:function(){
return "<div id=\"celebration\"><video id=\"myvideo1\" width=\"300px\" ><source src=\"video/winning.mp4\" type=\"video/mp4\"></video></div> ";
},
getVideoElement:function() {
return $("#celebration");
}
};
This is an object where I actually control video.
var obj = Object.create(Screens);
obj.playVideo = (function() {
var videoFile = "";
var play = false;
function start() {
$("body").append(obj.getVideoScreen());
document.getElementById("myvideo1").play();
document.getElementById("myvideo1").addEventListener("ended",function(){
end(); console.log("end");
}, false);
}
function end() {
obj.getVideoElement().remove();
}
return {
startVideo:function(flag) {
play = flag;
if(play) {
start();
}
else {
end();
}
}
}
})();
I have a button and on click it plays video,
$("#start").click(function() {
obj.playVideo.startVideo(true);
});
This works fine for around 5 to 10 times and later on it doesn't work. Doesn't work mean I get a white screen and video doesn't play. I inspected the page and video tag is there but doesn't play the video. I really don't have any idea about what is going wrong. I saw few posts and that didn't help. Looking ahead for a help....
EDIT :
I am using chrome Version 26.0.1410.64 m. And I'm concerned only about this browser.
You can see this page.
I am facing a problem of which I do not understand the origin:
I have a video playing on a website using the <video> tag. Client asked to add only a "mute" button in the shape of an icon that changes when clicked.
So i've tried this:
this is the icon i place over the video
<img src="mute0.png" id="mutebutton" onclick="javascript:muteUnmute()" />
and this is the javascript:
var mutebutton = document.getElementById('mutebutton');
function muteUnmute() {
video.muted = !video.muted;
}
video.onvolumechange = function(e) {
mutebutton.src = video.muted ? "mute1.png" : "mute0.png";
}
This works fine on Firefox and Opera, but the img src does not change in Chrome or in Safari!
I also tried this:
video.onvolumechange = function(e) {
if (video.muted) {
mutebutton.src = "mute1.png"
} else {
mutebutton.src = "mute0.png"
}
}
but still no result.
Does anybody have a clue why Chrome and Safari do not allow me to change the img src in this way? Can you suggest a way to solve this matter?
Thank you!
Edit:
Solved! this might be useful to someone:
the problem was on the video.onvolumechange event, it seems that Chrome and Safari do not understand that
so I've done this and it now works:
var mutebutton = document.getElementById('mutebutton');
function muteUnmute() {
video.muted = !video.muted;
mutebutton.src = video.muted ? "mute1.png" : "mute0.png";
}
It should change the video and start playing regardless of whether or not a video is currently loaded and playing.
Thanks.
See example below where api is your flowplayer instance and replaceclip is the one you want to start plating
var api = flashembed("player", {src:'FlowPlayerDark.swf'}, {config: ...}});
var replaceclip = {'url':'myvideo.mp4', 'autoplay':true};
<button onClick="api.playClip(replaceclip)">Play</button>
See my example in Github https://github.com/Teaonly/android-eye/blob/master/assets/droideye.js
var initAudioPlayer = function () {
// install flowplayer into container
// http://flash.flowplayer.org/
$f("player", "flowplayer-3.2.15.swf", {
plugins: {
controls: {
fullscreen: false,
height: 30,
autoHide: false,
play: false,
}
},
clip: {
autoPlay: false,
url: "stream/live.mp3",
}
});
audioPlayer = $f();
};
var newClip = {'url':'stream/live.mp3?id='+audioCount,'autoplay':true};
audioCount ++;
audioPlayer.play(newClip);
$f().play([{url:'yourmovie.flv'}]);
In this way you can change the video dynamically in Ajax.
You can check out the javascript api for the flowplayer here
Specifically, you'll probably want to check out the flowplayer objects 'Clip' and 'Player'