I am using videojs and wanna add captions from a URL. But player does not do as expected.
My code is as below.
HTML
<video id="media-player" class="video-js vjs-default-skin">
</video>
JavaScript code
let videoOption = {
controls: true,
autoplay: true,
fluid: true,
preload: 'auto',
poster: 'http://remote-url/1.png',
sources: [{
src: 'http://remote-url/1.mp4',
type: 'video/mp4'
}]
};
let captionOption = {
kind: 'captions',
srclang: 'en',
label: 'English',
src: 'http://remote-url/1.vtt'
};
const player = videojs('media-player', videoOption);
player.addRemoteTextTrack(captionOption); // palyer does not load caption
console.log(player.textTracks().length) // print out => 0
console.log(player.remoteTextTracks().length) // print out => 0
After searching hours of internet. Finally found this useful answer. #Xi Xiao's print out comment is mistyping, it should be a number more than 0.
So after you add
player.addRemoteTextTrack(captionOption);
const tracks = player.remoteTextTracks();
console.log(tracks.length); // print out greater than 0
Then you can turn on the caption button by
for (let i = 0; i < tracks.length; i++) {
const track = tracks[i];
if(track.kind==='captions' && track.language === 'eng') {
track.mode = 'showing';
}
}
}
All of these code are in the ready block.
It turns out that ready function is needed before any API call.
let player = videojs('media-player', videoOption);
player.ready(function () {
player.addRemoteTextTrack(captionOption);
console.log(player.textTracks().length) // print out => 0
console.log(player.remoteTextTracks().length) // print out => 0
});
I've built a HTML-5 "video-js"-based page that implements soft-subtitling
(using VTT).
You may want to view-source on it, and see if any of that coding
is useful to your effort. The page is here:
http://weasel.firmfriends.us/Soft-VTT-Cloud/
Related
I'd like to know whether it's possible to play three audio files one after the other and having a participant clicking on a button (perhaps a speech bubble) indicating the audio file he wants to select. Everything while an image is displayed constantly at the bottom (or top I really don't care about that).
IMPORTANT: I'd like each audio + speech bubble to appear together one at a time and stay on the monitor until the last sound has been played.
I have a drawing of what I mean:
A plus is to make it possible with some jsPsych plugin!
Please help me guys!
UPDATE, problem solved !
The main idea is to give up on the for loop, or providing a whole vector ideas and specify each audio as an independent trial, and concatenate the trials into a bigger "task".
The solution came from the main JsPsych group.
experiment: [];
var trial1 = {
type: 'audio-button-response',
stimulus: 'audio1.mp3',
choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
trial_ends_after_audio: true,
prompt: "<img src='stimImage.jpg'>"
};
var trial2 = {
type: 'audio-button-response',
stimulus: 'audio2.mp3',
choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
trial_ends_after_audio: true,
prompt: "<img src='stimImage.jpg'>"
};
var trial3 = {
type: 'audio-button-response',
stimulus: 'audio3.mp3',
choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
response_ends_trial: true,
prompt: "<img src='stimImage.jpg'>",
on_finish: function(data) {
jsPsych.data.addDataToLastTrial({
key_press: data.choices
});
},
};
var fixation_trial = {
type: 'html-keyboard-response',
stimulus: '<div style="font-size:60px;">+</div>',
choices: [69],
trial_duration: 1000,
data: {
test_part: 'fixation cross'
},
on_finish: function(data) {
if (data.key_press == 69) { //press letter 'e' to skip this part
jsPsych.endCurrentTimeline();
}
}
};
var task = {
timeline: [fixation_trial, trial1, trial2, trial3]
};
experiment.push(task);
jsPsych.init({
timeline: experiment,
})
Although the examples of jsPsych about audio are not abundant, I did manage to find this example which loops images until a button is pushed and implemented the same logic to your audio files.
I'm not sure if the speech bubbles will appear at the correct moment, but altering the object in the audio_trials.push() method to include each image with each audio file, might solve it.
var audio = ['dep.mp3', 'dep.mp3', 'dep.mp3'];
var audio_trials = [];
for (let i = 0; i < audio.length; i++) {
audio_trials.push({
stimulus: audio[i]
});
}
var audio_trial = {
type: 'audio-button-response',
choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
prompt: "<p>Click on the correct speech bubble</p>",
button_html: '<img src="%choice%" style="width: 300px"/>',
on_finish: function(data) {
jsPsych.data.addDataToLastTrial({
key_press: data.choices
});
},
timeline: audio_trials
};
var fixation_trial = {
type: 'html-keyboard-response',
stimulus: '<div style="font-size:60px;">+</div>',
choices: [69],
trial_duration: 1000, // here there is the random variation
data: {
test_part: 'fixation cross'
},
on_finish: function(data) {
if (data.key_press == 69) { //press letter 'e' to skip this part
jsPsych.endCurrentTimeline();
}
}
};
jsPsych.init({
timeline: [fixation_trial, audio_trial],
use_webaudio: true
});
I Want to setup Video Ads before playing video with Media ElementJs
I Download latest Version of MediaElementJS from :
https://github.com/mediaelement/mediaelement/zipball/master
in demo Folder :
I edit this Javascript codes:
<script id="mejs-code">
var mediaElements = document.querySelectorAll('video, audio');
for (var i = 0, total = mediaElements.length; i < total; i++) {
var features = ['prevtrack', 'playpause', 'nexttrack', 'current', 'progress', 'duration', 'speed', 'skipback', 'jumpforward',
'markers', 'volume', 'playlist', 'loop', 'shuffle', 'contextmenu'];
// To demonstrate the use of Chromecast with audio
if (mediaElements[i].tagName === 'AUDIO') {
features.push('chromecast');
}
new MediaElementPlayer(mediaElements[i], {
// This is needed to make Jump Forward to work correctly
pluginPath: 'https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.3/',
shimScriptAccess: 'always',
autoRewind: false,
features: features,
currentMessage: 'Now playing:'
});
}
to these Codes :
<script id="mejs-code">
var mediaElements = document.querySelectorAll('video, audio');
for (var i = 0, total = mediaElements.length; i < total; i++) {
var features = ['prevtrack', 'playpause', 'nexttrack', 'current', 'progress', 'duration', 'speed', 'skipback', 'jumpforward',
'markers', 'volume', 'playlist', 'loop', 'shuffle', 'contextmenu','ads'];
// To demonstrate the use of Chromecast with audio
if (mediaElements[i].tagName === 'AUDIO') {
features.push('chromecast');
}
new MediaElementPlayer(mediaElements[i], {
// This is needed to make Jump Forward to work correctly
pluginPath: 'https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.3/',
shimScriptAccess: 'always',
autoRewind: false,
adsPrerollMediaUrl: 'http://media.productionhub.com.s3.amazonaws.com/preroll.mp4',
adsPrerollAdUrl: 'http://www.github.com/',
features: features,
currentMessage: 'Now playing:'
});
}
But I cant see my VideoAds before Playing the Video
Please help me with thanks.
You need to setup the URL for ads using https://github.com/mediaelement/mediaelement-plugins repository, and then adsPrerollMediaUrl should be an array not just a string
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
Since Firefox doesn't allow me to use an .mp4 file in the <video>-tag, I have to use the Flash-fallback on my VideoJS player.
For Chrome, Safari and IE, I can configure my VideoJS player with javascript to do pretty much anything. For example I like to loop it 5 times, hide the controls and mute the video. No issue there for the HTML5 version:
// Initialize the video with some settings
videojs(videoID, {
"controls": false,
"autoplay": false,
"preload": "auto",
});
var myVideo = videojs(videoID);
// Set the counter
var loop_count = 1;
// Function to loop the video exaclty 5 times
var loopInstagramVideo = function() {
if (loop_count <= 5) {
myVideo.play();
loop_count++;
} else {
loop_count = 1;
}
};
// Function to manipulatie the playing video (mute, no controls,...)
var setVideoOptions = function() {
myVideo.muted(1);
myVideo.controls(0);
};
// Set functions on the video
myVideo.on("play", setVideoOptions);
myVideo.on("ended", loopInstagramVideo);
So I would like to do the same for the Flash version.
The code above is generating an error on the videojs-call with the error:
TypeError: The element or ID supplied is not valid. (videojs)
Any thoughts on how to tackle this issue?
While this isn't an answer for your "looping" question, I just myself discovered that after calling videojs() on an element, the ID changes. Whether it's the ID of the element changes or the focus of the videojs call changes I don't know. The error pertaining to the ID not being valid is being caused by your first and second videojs() calls.
I would change this:
videojs(videoID, {
"controls": false,
"autoplay": false,
"preload": "auto",
});
var myVideo = videojs(videoID);
To this:
var myVideo = videojs(videoID);
myVideo.controls = false;
myVideo.autoplay = false;
myVideo.preload = "auto";
OR put those properties in the video tag itself.
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'