Scenario
I am using the following plugin which gets a video's captions and displays them in a transcript area:
https://github.com/walsh9/videojs-transcript
My player is based on the advanced player example (which uses playlist and playlist-ui plugins):
http://videojs.com/advanced/
Desired Behaviour
At the end of a video, the transcript area content and functionality should change to be relevant to the next videos captions.
Actual Behaviour
The transcript is working for the first video.
At the end of the video, however, the next video starts to play and the transcript area stays the same (text and functionality), and continues to use the .vtt file associated with the first video.
The captions for the second video (that are displayed in the video area) are showing correctly.
What I've Tried
I added a listener to the end of the video, clear the transcript area's html and then try and re-initialise both videojs and the transcript plugin with the following, but the transcript area is just re-populated with the same text and functionality.
// BEGIN initialize video.js and when done run initialiseTranscriptPlugin()
var my_video_id = videojs('preview-player', {}, function() {
initialiseTranscriptPlugin(this);
});
// END initialize video.js and when done run initialiseTranscriptPlugin()
// BEGIN initialise transcript plugin
function initialiseTranscriptPlugin(this_thing) {
var options = {
followPlayerTrack: true,
showTitle: false,
showTrackSelector: false,
clickArea: "text"
};
var transcript = this_thing.transcript(options);
transcript.id = "transcript_container";
var transcriptContainer = document.querySelector("#transcript_container");
transcriptContainer.appendChild(transcript.el());
}
// END initialise transcript plugin
// BEGIN events at end of video
document.getElementById('preview-player').addEventListener('ended', myHandler, false);
function myHandler(e) {
var transcriptContainer = document.querySelector("#transcript_container");
// clear contents of transcript container
transcript_container.innerHTML = "";
// BEGIN initalise video.s js again and run initialiseTranscriptPlugin()
var my_video_id = videojs('preview-player', {}, function() {
initialiseTranscriptPlugin(this);
});
// END initalise video.s js again and run initialiseTranscriptPlugin()
}
// END events at end of video
Question
How do I ensure that each video's captions are loaded in the transcript area when moving from one video to the next?
This seems to work, see this videojs-playlist event:
https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md#playlistitem
// my_video_id.on('playlistitem', function() {
var test = videojs('preview-player');
var transcriptContainer = document.querySelector("#transcript_container");
transcript_container.innerHTML = "";
var options = {
followPlayerTrack: true,
showTitle: false,
showTrackSelector: false,
clickArea: "text"
};
var transcript = test.transcript(options);
transcript.id = "transcript_container";
transcriptContainer.appendChild(transcript.el());
});
Related
I'm attempting to display Video.js captions on a custom DOM element, outside of the video playing. This works as intended and below are snippets showing this.
Unfortunately, I can't seem to disable captions appearing also on top of the video too. Is there a way to disable captions appearing/showing on top of the video and only in the TextTrackDisplay element?
Any setting in the caption options (addRemoteTextTrack(options)) and textTrackSettings.setValues() seems to affect both on-video and custom captions.
let captionOption = {
kind: 'captions',
srclang: 'en',
label: 'English',
src: subURL,
mode: 'showing',
};
connectTextTracks = (player) => {
const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
const textTrackDisplay = new TextTrackDisplay(player);
subtitleDiv.appendChild(textTrackDisplay.el());
}
player.ready(function () {
player.addRemoteTextTrack(captionOption);
const tracks = player.remoteTextTracks();
console.log(tracks.length); // print out greater than 0 if captions exists
var settings = this.textTrackSettings;
settings.setValues({
backgroundColor: '#000',
backgroundOpacity: '1',
edgeStyle: 'uniform',
});
settings.updateDisplay();
connectTextTracks(player);
});
I ended up just hiding the on-video text track display, before creating a new TextTrackDisplay, like so:
// First hide main text track display (on-video)
const mainTextTrackDisplay = player.getChild('TextTrackDisplay');
mainTextTrackDisplay.setAttribute("hidden", true);
// Add new text track display
const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
const newTextTrackDisplay = new TextTrackDisplay(player);
const newTextTrackDisplayEl = newTextTrackDisplay.el();
// Append new text track display to subdiv element
const subDiv = document.querySelector("#subdiv");
subDiv.append(newTextTrackDisplayEl);
Full example here:
https://codepen.io/avtconnect/pen/poOvEyj
I have a Suitelet rendering a PDF from various record types which do not currently have Advanced PDF functionality.
Everything works fine when I file.save() the finished PDF, but I would like the option to open the PDF in the browser without saving to the file cabinet first.
Currently, the action part of the script is this:
var templateFile = config.getValue({fieldId:'custrecord_extpdf_template_xml'});
var templateHTML = file.load({id: templateFile}).getContents();
var renderer = render.create();
renderer.templateContent = templateHTML;
renderer.addRecord('record',rec);
renderer.addRecord('config',config);
if (SAVETORECORD) {
var PDF = renderer.renderAsPdf();
PDF.folder = config.getValue({fieldId: 'custrecord_extpdf_temp_folder'});
PDF.name = param.rectype + param.id + '.pdf';
var fid = PDF.save();
var attachitem = record.attach({
record: { type: 'file', id: fid },
to: { type: param.rectype, id: param.id }
})
context.response.write(file.load({id:fid}).url )
}
else {
var PDF = renderer.renderAsPdf();
PDF.name = param.rectype + param.id + '.pdf';
context.response.writeFile(PDF,false)
}
When the variable SAVETORECORD is true, the PDF renders nicely, and opens in a new tab, attaches to the record, and is saved to the file cabinet.
However, when SAVETORECORD is false, a new window opens but is BLANK.
The Suitelet is called from a custom button trigger with the following code:
var response = https.get({url: suiteletURL });
if (response.body) window.open(response.body,'_blank');
window.location.reload(true);
I've tried context.response.writeFile(PDF,false) and context.response.writeFile(PDF,true) but get the same result.
What am I missing here?
After sleeping on it, I figured what I'd done wrong.
To save the PDF, the code stays as is.
To open in the browser without saving, I just needed to open the SuiteLet URL rather than the response.body from the button script:
if (SAVERECORD) {
var response = https.get({url: suiteletURL });
if (response.body) window.open(response.body,'_blank');
}
else {
window.open(suiteletURL,'_blank');
}
window.location.reload(true);
I noticed when using Owl Carousel 2, while slide the item in mobile viewing, the browser also can be move up and down. Try to disabling the scroll function when trigger the Owl Carousel 2 prev and next function in mobile but it still doesn't work.
$('.owl-carousel').owlCarousel({
loop:true,
margin:5,
nav:true,
items:2,
});
// $('.owl-carousel').bind("mousewheel", function() {return false;});
$('.owl-carousel').bind('touchmove', function(e){e.stopPropagation(); alert('allow scroll');});
Appreciated the answer from expert out here.
Thank you.
I made this work with the help of OwlCarousel2 events.
There are 2 events we can use together for this purpose:
drag.owl.carousel fires when user start to drag
dragged.owl.carousel fires when dragging finished
And this make it work like how we want it:
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
});
owl.on('drag.owl.carousel', function(event) {
$('body').css('overflow', 'hidden');
});
owl.on('dragged.owl.carousel', function(event) {
$('body').css('overflow', 'auto');
});
So; it use css overflow to disable scrolling when dragging started and enables it back when it finished.
This works on iOS & VueJS.
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
})
// disable scroll
owl.on('drag.owl.carousel', function(event) {
document.ontouchmove = function (e) {
e.preventDefault()
}
})
// enable scroll
owl.on('dragged.owl.carousel', function(event) {
document.ontouchmove = function (e) {
return true
}
})
look for the below piece of code in custom.js file of your project
Owl.Defaults = {
items: 3,
loop: false,
center: false,
rewind: false,
mouseDrag: true,
touchDrag: true,}
change the things to below:-
touchDrag:false,
and owl-carousel will simply stop scrolling horizontally both on mobile and desktop drag!
For owlcarousel2, you can use mouseDrag option.
$('.owl-carousel').owlCarousel({
mouseDrag:false
});
Reference https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
in owl.js
mouseDrag: false,
touchDrag: false,
pullDrag: false,
freeDrag: false,
Here is the problem,
First I enumerate all the devices that I have available with in select elements:
navigator.mediaDevices.enumerateDevices()
When I change one output, it sounds in the device that I choose.
HTMLMediaElement.setSinkId(deviceId)
After if I play another audio and change the device output (setSinkId), it changes also the first one to the last deviceId. So I have both sounds in the same device.
Do I need to have the last adapter.js version to implement properly that problem?
********* EDITED **********
Following the above comment, it try the web audio, but not success. With getUserMedia everything is fine.
navigator.getUserMedia( { audio: true, video: false },
function (mediaStream) {
// Create an audio context for the audio
var ac = new (window.AudioContext || window.webKitAudioContext)();
// Create a clone of the stream, if not the id of all the stream is default
//var streamClone = stream.clone();
var ss = ac.createMediaStreamSource(mediaStream);
// Create a destination
var sd = ac.createMediaStreamDestination()
ss.connect(sd);
element.srcObject = sd.stream;
// Play the sound
element.play();
element.setSinkId(deviceId).then(function() {
console.log('Set deviceId('+deviceId+') in the selected audio element');
});
},
function (error) {
console.log(error);
}
);
But using my remote stream, I cannot get any noise
var ac = new (window.AudioContext || window.webKitAudioContext)();
// Create a clone of the stream, if not the id of all the stream is default
var streamClone = stream.clone();
var ss = ac.createMediaStreamSource(stream);
// Create a destination
var sd = ac.createMediaStreamDestination()
ss.connect(sd);
// Element is my HTMLMediaElement
element.srcObject = sd.stream;
// Play the sound
element.play();
element.setSinkId(deviceId).then(function() {
console.log('Set deviceId('+deviceId+') in the selected audio element');
});
this is most likely caused by how Chrome renders audio. See here for a description which also suggests using webaudio to workaround the problem.
adapter.js can not fix this.
I'm using jquery ui tabs and video.js. I want to stop the video when I go to another tab and reset it when I come back to second tab.
As of VideoJS v4.6 you can do the following to reset the player:
player.pause().currentTime(0).trigger('loadstart');
That loadstart is the key which shows the poster image and rebinds the first play event.
u can use this for show poster or show bigplay button
$( '.backlink' ).click( function() {
// Player (this) is initialized and ready.
var myPlayer = _V_("video9");
myPlayer.currentTime(0); // 2 minutes into the video
myPlayer.pause();
myPlayer.posterImage.el.style.display = 'block';
myPlayer.bigPlayButton.show();
});
It's even easier.
let player = Video(el);
player.on('ended', () => {
player.initChildren();
});
First you need a reference to the video player.
http://videojs.com/docs/api/
var myPlayer = _V_("myVideoID");
Then you can use the API to start/stop/reset the video.
Stop:
myPlayer.pause();
Reset:
myPlayer.currentTime(0);
I'm not sure how the jquery tabs are set up, but you might be able to do:
$('.my-tab-class').click(function(){
myPlayer.pause().currentTime(0);
});
player.reset();
Life is simple.
Get the id of the video.just append _html5_api with the id since videojs appends these letters and then you could use pause and make currentTime equal to 0.
var videoStop = document.getElementById(videoId+"_html5_api");
videoStop.pause();
videoStop.currentTime= 0;
The solution I found was using the videojs api, invoke the reset function followed by initChildren for reconstruct the player structure, i'm using vesion 5.10.7.
videojs('sublime_video', {}, function () {
var videoPlayer = this;
videoPlayer.width(screen.width / 2);
videoPlayer.height(720);
videoPlayer.on("ended", function(){
videoPlayer.reset().initChildren();
});
});
I was looking for a way to reintialize the VideoJS plugin then I found this :-
var player = videojs('my-player');
player.on('ended', function() {
this.dispose();
});
Just dispose off the video and init again.
Source:- https://docs.videojs.com/tutorial-player-workflows.html#dispose