I'm fairly new to videojs but I upgraded a project with videojs to v7.17.0
Defined the playback rate in the options
videojs(
'my_video',
{
techOrder: ["youtube"],
playbackRates: [0.5, 0.75, 1],
children: [
"mediaLoader",
"posterImage",
"textTrackDisplay",
"loadingSpinner",
"bigPlayButton",
"controlBar",
"errorDisplay",
"textTrackSettings",
"resizeManager"
],
sources: [
{
"type": "video/youtube",
"src": 'video_url'
}
],
controlBar: {
pictureInPictureToggle: false
}
}
)
This didn't add the playback rate menu in the control bar. So I did some test in the browser console itself
player.controlBar.addChild('playbackRateMenuButton')
e {player_: o, isDisposed_: false, parentComponent_: t, options_: {…}, id_: 'my_video_component_5045', …}
This suggests that menu button was added but still no button in the control bar itself.
I also tried this with the pictureInpicture toggle menu and it does add it to the controlbar but not the playback rate menu
Anyone know a fix for this?
P.S. I tried to define playbackRateMenuButton: true in the controlBar option as well which throws a RangeError: Invalid array length
This usually happens "data-setup" is passed in the video tag, in that case, the options passed while initializing is not applied. Removing data-setup from HTML must work.
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup="{}" // Remove this from code.
>
Related
I'm trying to add a subtitle track to a video and I can't figure out why it isn't working correctly. Here is my HTML:
<video controls>
<source src="../assets/video/sample.mp4" type="video/mp4" />
<track
src="../assets/video/sample.vtt"
kind="subtitles"
srclang="en"
label="English"
/>
</video>
And here is my .vtt file:
WEBVTT
00:00:00.500 --> 00:00:02.000
The Web is always changing
00:00:02.500 --> 00:00:04.300
and the way we access it is changing
Problem:
When I run my website locally the video will load, but when I click on the closed captions button and select English, there is a console error that reads:
GET http://localhost:8080/assets/video/sample.vtt 404 (Not Found).
If I deploy the website and run it from the server instead, selecting the English subtitle track doesn't display any errors, but...
The subtitles don't appear on the video.
The Closed Captions button is removed from the video player controls on Chrome.
In other browsers, the Closed Caption button remains, but everything else is identical.
If I check the Network tab in Chrome dev tools, I can see that the request was made for sample.vtt at the correct request URL and returned a 200 status code.
The odd thing is that when I look at the response for that request, instead of seeing the text of the .vtt file, it shows the full text of my website's index.html file, which is located in an entirely separate folder.
I'm not sure why this is happening, and it seems like this should be a relatively simple thing to set up, so I can't figure out what's going wrong.
This ended up being an issue with Webpack. This app is in Vue, so I added the following options under the "vue" rule in vue.config.js, and it worked:
config.module
.rule("vue")
.use("vue-loader")
.loader("vue-loader")
.tap((options) => {
options.transpileOptions = {
transforms: {
dangerousTaggedTemplateString: true,
},
};
options["transformAssetUrls"] = {
video: ["src", "poster"],
source: "src",
img: "src",
image: ["xlink:href", "href"],
use: ["xlink:href", "href"],
"b-embed": ["src", "poster"],
track: "src",
};
return options;
});
config.module
.rule("media")
.test(/\.(vtt|mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/);
I'm using Magnific popup our product product pages as a method for image hot points. Right now when you click on a hot point a popup appears with larger image and text. I received a request to open the popup on a mouseover.
Is there a way to trigger open Magnific Popup on a mouseover not on a mouse click?
I was trying to call the mouseover event on the link first, but it seems the Popup still requires a click. How to I make it so it opens up just with a mouseover?
<!-- Popup link -->
Show inline popup
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">
Popup content
</div>
Javascript:
$('.open-popup-link').mouseover(function(){
$(this).magnificPopup({
type: 'inline'
});
});
Answering my own question. After a bit more research I found that I needed to open the popup directly via API. It works now:
$('.open-popup-link').mouseover(function(){
$.magnificPopup.open({
items: {
src: '.white-popup' // can be a HTML string, jQuery object, or CSS selector
}
})
});
Working example: https://codepen.io/pen/ZKrVNK
Taking it further with multiple links opening separate slides of a gallery, using event delegation:
http://codepen.io/pen/EmEOMa
We are working on a mobile web application. The designer likes the image carousel effect on App Store (the screenshots of the an App). So we try to mimic the same effect using JavaScript.
We are using iScroll to implement. So here is a customization of its demo carousel: http://jsfiddle.net/0t9savgj/. The options are:
{
scrollX: true,
scrollY: false,
momentum: false,
snap: true,
snapSpeed: 400,
keyBindings: true,
indicators: {
el: document.getElementById('indicator'),
resize: false
}
});
The problem is: for the last image, there is always some extra space, which is unwanted:
Does any one knows how to solve this? Or some other JS libraries implementing the same carousel? Thanks.
After exploration, the only way is to use the scroll event of iscroll-probe.js. Manually stop the scrolling when reaching the right border. But the indicators are not exact.
I tried this simple example:
$.magnificPopup.open({
gallery: {
enabled: true
},
items: [
{src: "tracks/" + p[0]},
{src: "tracks/" + p[1]}
],
type: 'image'
});
Only the first slide (0) pops up and there is no gallery - just a single slide. What is wrong?
You should never give up: Problem is solved. I isolated the code from the gallery example of the homepage of Magnific Popup and put it into a page of my own. The result was the same as described above i.e. gallery was not working. I then downloaded Magnific Popup again and noticed that the library file was bigger than my previous library file. So the library file was corrupted in some way - probably my fault. Now gallery is working...
Edit: Upon further examination I discovered that I hadn't included certain namespaces. Adding the relevant name spaces now gives the error:
'myapp.mainpanel has no method setActiveItem'
I am trying to build a sencha touch web app using the card layout mechanism. I make use of the following handler on a button on the landing page:
handler:function(){
myapp.mainpanel.setActiveItem(myapp.cards.vehicleSearchResults, { type: 'slide', cover: false, direction: 'left'})
}
But when I click on the button I get the error: Sencha Touch error: 'myapp.mainpanel has no method setActiveItem'
Does this mean myapp.cards.vehicleSearchResults is undefined?
I define it here:
myapp.cards.vehicleSearchResults = new Ext.Panel({
scroll:false,
layout:{
type:"vbox",
align:"stretch"
},
id: "vehicle-search-results-card",
dockedItems: [myapp.toolbars.searchResultsTitle, myapp.toolbars.searchResultsNav, myapp.toolbars.searchResultsCaption]
})
Any clues as to what I am doing wrong based on the above code?
The setActiveItem() method is only available if the panel has a card layout. Make sure you add the 'card' layout property in your panel definition.