I have save the videos in s3(amazon).I'm getting the videos on my page through the api.When I use the provider and streamer value in jwplayer script then it is not playing.It is showing processing only.In chrome it is showing the flash file.Please let me know how can i fix this.I'm using the following jwplayerscript
<div id="mediaplayer"></div>
<script type="text/javascript" src="https://www.markettrendsignal.com/js/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "http://s3.amazonaws.com/coaching_videos_out/player.swf",
file:"http://s3.amazonaws.com/coaching_videos_out/20120607/2012-06-13%2018.02%20Course%201%20-%20Market%20Trend%20Signal%20-%20Lesson%201%281%29.flv",
height: 410,
provider: "rtmp",
streamer: "rtmp://s2wk266t4t9j1u.cloudfront.net/cfx/st",
width: 590,
autostart:true
});
please let me know how can I fix this ASAP.
Thanks,
Try to set the Content-Type header on the S3 object when uploading it and you can do this for already uploaded objects by updating object metadata using amazon S3 explorer or SDK.
Related
I am using Videojs version 7.6.6. It will not play a html5 video if the src is a blob URL. It will load the video time however, but will not play. I get this warning, and then it loads forever:
VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the only playlist.
This is the way my code runs:
<video id="my_video" class="video-js vjs-matrix vjs-default-skin vjs-big-play-centered" controls
preload="none" width="640" height="268" data-setup="{}"></video>
<script type="text/javascript" src="/js/video-766.min.js"></script>
<script>
fetch("https://server/hls/index.m3u8").then(result => result.blob())
.then(blob => {
var blobURL = URL.createObjectURL(blob);
var player = videojs("my_video");
player.src({ src: blobURL, type: "application/x-mpegURL" });
}
);
</script>
If I try it without a blob, just a regular URL to the index.m3u8 file, then it works. So this is a problem with the creation of the blob URL I think. This works, the video starts playing:
<video id="my_video" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
<source src="https://server/hls/index.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('my_video');
</script>
I have searched for this issue and found a lot, but none of it helps me. Am I creating the blob wrong?
The object URL that is generated for the blob will start with file:// protocol if I'm not wrong. Browsers doesn't let you load data with file:// URL. I ran into a similar problem so I created a simple server on my app which returns the requested file over https:// .
The reason why your index.m3u8 is running because it is served over https protocol
Is there any function/hook for showing a loader while an Amazon S3 image downloads from Amazon S3 (or any image from anywhere for that matter)? I'm not currently using any CDNs or CloudFront, so my downloads can sometimes be slow. I'd like to just show a loader while the image is downloading. In my code I have:
{{#if uploadedCustomLogo}}
{{#with customLogo}}
{{#if isUploaded}}
<div class="img-wrapper">
<img src="{{this.url store='logos'}}" alt=""/>
</div>
{{else}}
{{> loading}}
{{/if}}
{{/with}}
{{/if}}
The issue is the uploading {{> loading }} loader-template runs fine, but it only lasts a fraction of a second because the actual upload is really fast. It's the download that can then take several seconds (sometimes up to twenty or so even on a small image). Is there any way to test/check if an image has been downloaded?
I used FF Inspector to see if there was a delay in the src getting set on the img tag but it gets set immediately. So the wait is really on S3... nothing changes in the DOM once it finally loads.
I'm using CollectionFS and the S3 adapter (Meteor-cfs-s3).
I figured it out. I was searching for the wrong thing on Google. The question is really how to use JQuery to listen for when an image has loaded. So you can just add your loader in your template, then hide it once the load event fires on the image. This simple code works great in Meteor:
Template.myTemplate.events({
'load #whateverImage': function(event) {
event.preventDefault();
// Hide your loader DIV (for example)
hideLoader();
},
The solution is to use has stored helper, I also had a problem figuring this one out isUploaded is to the meteor server but if you want to wait to for it to be uploaded to amazon s3 {{#if this.hasStored 'thumbs'}}
edit:
Here is my custom helper to check if it's upload & stored to amazon s3 (So I can safely create an amazon s3 url and display it to the user).
Which in my case looks like this:
uploadDoc: function () {
var fileId = Template.instance().posterData.get('fileId'); // You can ignore this, It's just how I get the file document id.
if (fileId)
return Images.findOne(fileId); // We need the file document
}
isUploadedAndStored: function (storage) {
if (this && this.copies && this.copies[storage])
return true;
}
sUrl: function () {
if (this && this.copies && this.copies.thumbs)
return 'https://s3-us-west-2.amazonaws.com/NAME/' + this.copies.thumbs.key;
}
using it like this:
{{#with uploadDoc}}
{{#if isUploadedAndStored 'thumbs'}}
<img class="attachment-thumbnail" src="{{sUrl}}">
{{else}}
{{>loading}}
{{/if}}
{{/with}}
How it works? When we subscribe to the uploaded file collection the document will not have copies and when it comes from the server it means it's actually saved on amazon s3, the this.hasStored does similar check but I found it to re-run too many times maybe need to report it to github so they can fix it.
I'm trying to load an epub on my page using epub.js library and its not working on IE 11, it works perfrectly on chrome and Firefox though.
I'm not getting a script error, I don't get a message in the console log, fiddler says all scripts (including zip.js and my epub) are downloaded properly.
It just doesn't load, the iframe embedded has a src="" property and an empty html body. as in the following snapshot.
Here is my html page content:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="content/epubjs/epub.js"></script>
<script src="content/epubjs/libs/zip.min.js"></script>
</head>
<body>
<span onclick="Book.prevPage();">Prev</span>
<span onclick="Book.nextPage();">Next</span>
<div style="height: 700px; border: 5px solid red" id="area"></div>
<script type="text/javascript">
EPUBJS.filePath = "content/epubjs/libs/";
</script>
<script type="text/javascript">
var Book = ePub("content/aliceDynamic.epub", {
version: 4,
restore: false, // Skips parsing epub contents, loading from localstorage instead
storage: false, // true (auto) or false (none) | override: 'ram', 'websqldatabase', 'indexeddb', 'filesystem'
spreads: false, // Displays two columns
fixedLayout: true, //-- Will turn off pagination
styles: {}, // Styles to be applied to epub
width: false,
height: '700px'
});
Book.renderTo("area");
</script>
</body>
</html>
I tried to play around with the options parameter, set things to false and true here and there but it didn't help.
It looks like it is a problem with the current version of epub.js and internet explorer 11. If you try and load the moby dick page you should see the same problem.
Try setting a break on all exceptions (even handled ones) in the javascript engine of IE, and you will see that the javascript throws an exception saying that "'XPathResult' is undefined".
Common recommendations to correct that seem to be installing the wicked-good-xpath library in order to sidestep ie11 lack of XPath support. Install the library and initialize it before trying to load you epub.
If this doesn't correct your problem, you may have to wait until the issues are solved since you don't seem to be the only person who encounters it.
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 a streaming distribution at s6b99lczhnef6.cloudfront.net on Amazon. The origin is a bucket in S3. The bucket has a video video.mp4. It's public.
I am trying to test streaming this video with jwplayer, following is the code:
<html>
<head>
<script type="text/javascript" src="jwplayer/jwplayer.js"></script>
</head>
<body>
<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "jwplayer/player.swf",
file: "video.mp4",
height: 270,
provider: "rtmp",
streamer: "rtmp://s6b99lczhnef6.cloudfront.net/cfx/st",
width: 480
});
</script>
</body>
</html>
The video is not playing. There are no JS errors. What could be going wrong?
The amazon documentation is valid for JW Player 5.9, and JW Player's documentation is fairly sparse on using CloudFront streaming. As briefly explained here, specifying the streaming source has changed with JW Player 6. This is the new way to specify a streaming source:
<div id='mediaplayer'>This text will be replaced</div>
<script type="text/javascript">
jwplayer('mediaplayer').setup({
'id': 'playerID',
'width': '720',
'height': '480',
'file': 'rtmp://s1cxpk7od1m10r.cloudfront.net/cfx/st/your_streaming_file.mp4',
'primary':'flash',
'autostart' : 'true',
});
</script>
If your stream is in the folder, you might have some issues using the file reference above. I'm not sure why rtmp://s1cxpk7od1m10r.cloudfront.net/cfx/st/folder/your_streaming_file.mp4 wouldn't work for me (I think it has something to do with URL encoding), however using this for the file param when accessing a streaming resource located in a folder worked for me:
rtmp://s1cxpk7od1m10r.cloudfront.net/cfx/st/mp4:folder/your_streaming_file.mp4
If you want to test your connection string and get some debugging output, checkout this streaming diagnostic tool.
You do not need to specify a bucketname anywhere in the embed code.
I think you have to give file string value as bucketname/video.mp4 else all seems fine.
No, that is not correct because he is using CloudFront.
I see in-consequent use of quotes. Try this:
<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
'flashplayer': 'jwplayer/player.swf',
'file': 'video.mp4',
'height': '270',
'provider': 'rtmp',
'streamer': 'rtmp://s6b99lczhnef6.cloudfront.net/cfx/st',
'width': '480'
});
</script>
Here is a tutorial that explains the formatting and options in great detail.
http://www.miracletutorials.com/embed-streaming-video-audio-with-html5-fallback/
If that does not work, it is possible your video is not optimized for streaming.
Try out this tutorial to convert your video:
http://www.miracletutorials.com/how-to-encode-video-for-web-iphone-ipad-ipod/
I hope this helps?
No, you do not need to provide a bucketname. The cloudfront distribution already points to a bucket.
Loading the HTML page from a server other than 'localhost' works.