I have used JW Player plugin in my joomla website. We have a lot of videos to upload in our website, so we are using Amazon. In the desktop webbrowser the controls of player are working fine. But in mobile and safari webbrowser the controls are not shown properly.
This is the code I have added for amazon tag({amazon}{/amazon}).
<script type=\"text/javascript\">
jwplayer('{SOURCE}').setup({
'playlist': [{
sources: [{
'file':'https://s3.amazonaws.com/qa-mp4format/{SOURCE}'
},{
'file':'rtmp://srzg2rz4587c9.cloudfront.net/cfx/st/mp4:{SOURCE}'
}]
}],
'image': '{PLAYER_POSTER_FRAME_REMOTE}',
'height': '{HEIGHT}',
'width': '{WIDTH}',
'autostart': '{PLAYER_AUTOPLAY}',
'repeat': '{PLAYER_LOOP}',
'primary': 'flash',
'controls': '{JWPLAYER_CONTROLS}'
});
Please help me to solve this problem.
The JW controls will show up by default, so you can take that out of your configuration. Also if you are concerned about your mobile viewer experience, you will not want to force 'flash'.
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 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...
In one of my views I would like to display a PDF, which is accesible via URL. This should be done without opening an extra tab in the browser, and without downloading the PDF (to view it outside the browser). It should be visible embedded within the Ember application.
What I have in mind is:
Use the URL to get the PDF and make it accessible to the ember application.
Use a special "PDF view" to display the PDF.
Is this possible? What options do I have to display an embedded PDF in an Ember application?
Displaying a PDF is not really related to ember, because to view a PDF you need a PDF plugin installed in your browser (which is mostly installed by default depending by the browser).
That said, a possible solution I could imagine could be to create a custom ember view with the tagName iframe on which you set the src attribute to the link referring to the PDF.
Example:
App.PDFView = Ember.View.extend({
tagName: 'iframe',
attributeBindings: ['src', 'width', 'height', 'frameborder'],
src: 'pdffile.pdf',
width: 800,
height: 600,
frameborder: 0
});
I've also used width, height and frameborder only for convenience so you can control some of the iframe's attributes easily from within ember. Here a working demo.
You can also go with something more elaborated and use a js lib like http://pdfobject.com/ which you then initialize in your view's didInsertElement hook:
App.PDFView = Ember.View.extend({
src: 'pdffile.pdf',
width: 800,
height: 600,
didInsertElement: function() {
new PDFObject({
url: this.get('src'),
width: this.get('width'),
height: this.get('height')}
).embed(this.get('elementId'));
}
});
(haven't tested the latter, but you get the point)
And then use this App.PDFView like a normal ember view in your templates.
{{view App.PDFView}}
Or your can set the src, width & height directly from within your template like
{{view App.PDFView src="pdffile.pdf" width="600" height="800"}}
Hope it helps.
You can certainly leverage the Ember PDFJS Addon by doing:
ember install ember-pdfjs
The README on GitHub describes the installation and use cases.
In short, the addon provides your Ember project with a component, pdf-document, which you can use in your HTMLBars template like so:
{{pdf-document src=[model.src]}}
... there are other permutations of what src can be (including a string file path, resource URI, or Uint8Array buffer).
If you don't see a feature that you need, please suggest in the Issues.
I have implemented the google_visualr gem and it works perfectly in development. However when I push to heroku the visualization does not show up. All the javascript is present and there is no error or indication in the app logs.
Here is the javascript that is generated. It's exactly the same as dev. Do i have to do anything additional to get the google visualization to run in heroku environment?
<script type='text/javascript'>
google.load('visualization','1', {packages: ['corechart'], callback: function() {
var data_table = new google.visualization.DataTable();data_table.addColumn('string', 'Status');data_table.addColumn('number', 'Count');data_table.addRow([{v: 'Started Applications'}, {v: 10}]);data_table.addRow([{v: 'Completed Applications'}, {v: 1}]);
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data_table, {width: 360, height: 240, title: 'Applications Status Summary', is3D: true, legend: 'bottom'});
}});
</script>
I found the problem was that my call to the google jsapi was not secure so the browser was blocking the request.
<script src='http://www.google.com/jsapi'></script>
I was able to fix this by requesting the jsapi in secure mode using https
<script src='https://www.google.com/jsapi'></script>
There is nothing additional to be done to get the visualizations to work on Heroku.
The demo site is hosted on Heroku too: http://googlevisualr.herokuapp.com/examples/interactive/pie_chart
Just to check, is this in the head tag, at the top of the page?
<script src='http://www.google.com/jsapi'></script>
I have tested the HTML5 video player, it can make HTML5 video fullscreen on Android Chrome browser but not Dolphin browser.
Is someone know what is the way to make HTML5 video fullscreen on Dolphin browser?
Thanks
Tested that jplayer can make HTML5 video in fullscreen, ever in Android 4.x default browser and Dolphin browser, the config should refer to below code:
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "demo.m4v"
});
},
swfPath: "js",
supplied: "webmv, ogv, m4v",
fullScreen: true
});