I’ve added this into the demo page which may help to test a bit more before hand.
These are the 4 attachments within my own Airtables. If you want, I don’t mind adding one of your tables into the demo page, just PM your key and tell us which table name then you can test your own and I’ll remove it once done. Up to you of course so don’t feel like you have to send me your key!
1 Like
Hey Paul, thanks for looking into this. I think it’s a critical feature for mobile and would love to see it work. I’m going to be testing soon and will let you know if I figure out a solution. Thanks again, we’ll chat soon!
1 Like
Hi, @pork1977gm
Does the plugin have a function that allows me to bring the comments and likes of the youtube videos to my page and authorize users to comment and like/unlike the youtube videos from my app?
Hi @mocabe
Unfortunately it doesn’t have this feature.
Hi Paul, I was wondering if there is a way to add an airplay button to the video player? For example is there a way to integrate this plugin: https://github.com/jgubman/videojs-airplay ?
Cheers,
Brooke
Great idea, I’ve just added it so if you update and try on iPhone, it should hopefully work. I tested on my own device and it looks good.
Works great! Do you know how to change the size of the airplay icon? Tried modifying vjs-airplay-button but no luck.
Cheers,
Brooke
It is possible to change the size of that control, I need to look at it through and it’s a little tricky since it only appears on iPhone which I can’t debug as easily as using desktop browsers. I will figure it out for you though so you can resize it through the Run javascript action. Leave it with me for a bit and I’l get back to you soon.
Hi @brookelustig
I can’t seem to find a way to change the size of the control on the iPhone. You can set the font-size of the .vjs-control-bar class which in turn scales all the icons in the control bar but iOS isn’t playing too well with that because some of the CSS properties are differently. I’ve tried all sorts of ways but I think if you can perhaps play with this, you might be able to make it work:
$('.vjs-control-bar').css('font-size', '120%');
or
$('.vjs-control-bar').css('-webkit-text-size-adjust', '110%');
The class which gets added when on iPhone is called “vjs-airplay-button”.
Maybe google will help with a way to do it, when I get some more time I may come back and take another look at it. Other than that, you may have to live with the default size there.
The main problem I have is that I don’t have a way to open the dev tools when trying to debug on an iPhone (like you can do using desktop browsers) which is making it difficult to play with CSS.
Change to subtitles
Hi all,
I just wanted to document a few changes which have been made around subtitles recently in an effort to further improve on this functionality.
The action Load subtitles has had some tweaks made to it.
First change is that you can now load SRT files as well as VTT files. VideoJS only supports the newer VTT format since it has more customization which can be applied to it, but if you have SRT files then they will be converted first and then displayed. Descriptions etc have been updated to reflect this within the action.
Second change is to do with the loading of multiple subtitles in the player. When you run the Load subtitles action more than once and supply different subtitle files, they will stack up in the control bar area and can be seen when clicking on the captions icon (as shown below).
When the captions are changed, all the various subtitle states are now updated correctly. Previously there were a few issues and not all these states got updated after another was selected from the captions list.
Here are all the subtitle states and what they do, including a couple of new ones added at the bottom.
-
Subtitles formatted
Contains the formatted text part of a subtitle file so it can be read. -
Subtitles start times (list formatted)
A list of extracted start times from a subtitles file (formatted). -
Subtitles end times (list formatted)
A list of extracted end times from a subtitles file (formatted). -
Subtitles captions (list)
A list of extracted captions from a subtitles file. -
Subtitles raw vtt
Contains the contents of a subtitles file. -
Subtitles current caption
Contains the current subtitle caption when the video is playing and subtitles are showing.
.
-
Subtitles current start time (formatted)
Contains the current subtitle start time when the video is playing and subtitles are showing (formatted as text). -
Subtitles current end time (formatted)
Contains the current subtitle end time when the video is playing and subtitles are showing (formatted as text). -
Subtitles current start time
Contains the current subtitle start time when the video is playing and subtitles are showing. -
Subtitles current end time
Contains the current subtitle end time when the video is playing and subtitles are showing.
.
-
Subtitles start times (list number)
A list of extracted start times from a subtitles file. -
Subtitles end times (list number)
A list of extracted end times from a subtitles file. -
Subtitles current filename
Shows the filename for a subtitle which is showing. -
Subtitles current label
Shows the label name for a subtitle which is showing.
There’s a new event also added called Subtitles have changed which will trigger accordingly.
This can all be seen in the transcription demo page. If you change the caption then all the real time states are updated on the left of the page.
If you end up looking at the Editor, then the purple workflow actions show you how to load multiple subtitles for a video using the JavascriptoBubble loop feature that you get in the Toolbox plugin.
Paul
1 Like
Changes to audio tracks
It’s now possible to load an audio track of your choosing against a video by supplying a file like an mp3, ogg, wav etc. You can swap video sources whilst maintaining a constant audio stream between multiple videos as shown in this small demo. Removing audio tracks is also supported.
https://paul-testing-4.bubbleapps.io/audio_tracks?debug_mode=true
Here are the details for the new actions
-
Load audio track
Loads an audio track file that is used to play different audio streams in a video. Running this action multiple times will add more audio tracks.
-Audio file
Your audio file, can be mp3, wav, ogg or any other format which is supported in HTML5.
-MIME type
This allows you to specify the audio's MIME type. Leaving this field blank will attempt to correctly set the mime type using the file extension of the given audio file.
-Kind
None: - No explicit kind, or the kind given by the track's metadata is not recognized by the user agent. Alternative: - A possible alternative to the main track. Descriptions: - An audio description of a video track. Main: - The primary audio track for this video. Main-descs: - The primary audio track, mixed with audio descriptions. Translation: - A translated version of the main audio track. Commentary: - Commentary on the primary audio track, e.g. a director's commentary.
-Label
The label for the track that will be shown to the user. For example, in a menu that lists the different languages available as alternate audio tracks.
-Loop
When set to Yes, the audio will loop playback.
-Enabled
Whether or not this track should be the currently enabled track.
-Play audio
When set to Yes, the audio track will be played immediately and any audio tracks in the main video will be muted. This only works when the 'enabled' option above is also set to Yes.
-Play video
Play the video when the audio track has been loaded. -
Remove audio track
Removes a previously loaded audio track.
-Label
The label for the track that is to be removed. Note, multiple labels by the same name will also be removed.
-All
Setting this to Yes, will remove all audio tracks.
1 Like
Hello @pork1977gm and thanks again for your amazing plugin !
I’ve recently installed the Azure Streaming service, all is functional with the MUX service but only on desktop !
i’m having this error
Is it something to do with the Codec ?
Also, will it be possible to make a custom Asset before pushing the live ? ( since it not editable with the API )
Thanks a lot !
No probs, can you take a look at the console through the browser and send us a screenshot of anything in there?
Oh scrap that, you’re on mobile right? What device is it? I’ll have a think and get back to you. I may need to see it more detail to figure out what’s causing and where that error is coming from.
Send us a few screenshots of your config etc. I’m a bit strapped for time at the moment but I’ll get back to you in more detail soon. It could well be an issue with codec/browser.
Hi Pork !
I was able to build a plugin that allow me to display the console log over the bubble page
here is was i get on mobile:
then it seem to work :
The first error doesn’t appear on desktop (where the stream work):
I let’s you check that on this page :
https://thetoolx.bubbleapps.io/version-test/streaming/asset1-1640259270170x847974942469895400?debug_mode=true
credential :
usernames : usernames
password : password
Thanks again !
Nice! I can fix that, thank you! Give us a bit and I’ll push an update for you.
What device are you using @antoine3 ? is it an Android?
Ok I think the error isn’t to do with the streaming, you may have something else going on, perhaps in Page Load event where something is trying to happen before the player is ready, not sure at the moment, will need to look a bit more closely. But can you PM me the exact way to replicate it, down to the buttons being pressed and I’ll run through it. Maybe a Google Meet quickly if you’re free to show me?
It’s working on apple, i’ve tried it only once ( with a friend’s device)
but it doesn’t work on android ( i’ve tried with brave and chrome on 3 differents devices).
Hey @pork1977gm , I’m having trouble showing video thumbnails on the iPhone (chrome and safari). They’re loading on iPad and desktop (safari and chrome) just fine without any setup. Is there anything I need to enable? Thanks in advance for any suggestions.
This is the thumbnail preview on desktop and iPad
This is the same on iPhone. Black screen. Video plays once started.
Hi @aram_appgraze ,
Are you setting the poster option here?
You may need to set that in order for it to work on iPhone.
Send us a few screenshots of what you have configured and I’ll try and help. Where are setting that globe image?