try to streaming video from my Amazon Cloudfront. I have created a bucket with html page (jwplayer.html), video (process.mp4) and jwplayer (uploaded from official website). Also I create a CloudFront web distribution and CloudFront RTMP distribution.
Add to jwplayer.html next code:
<HTML>
<HEAD>
<TITLE>Amazon CloudFront Streaming with JW Player 6</TITLE>
<script type='text/javascript' src='https://d7io7dti9fwp9.cloudfront.net/video/jwplayer-7.2.4/jwplayer.js'></script>
<script type="text/javascript">jwplayer.key = "AHKJ8oqvx6qWX8d9RY00tDP7VTETGz814NNzLw==";</script>
</HEAD>
<BODY>
<H1>This video is streamed by CloudFront and played by JW Player 6.</H1>
<div id='mediaplayer'></div>
<script type="text/javascript">
jwplayer('mediaplayer').setup({
file: "rtmp://s2z3jy56jskpuw.cloudfront.net/cfx/st/mp4:process.mp4",
width: "720",
height: "480"
});
</script>
</BODY>
</HTML>
Here is my result:
http://d7io7dti9fwp9.cloudfront.net/jwplayer.html
This solution does not work in my browser.
I think you are taking help from this tutorial
http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/TutorialStreamingJWPlayer.html
They have explained everything. there might be file permission issues.
Take a look there once.
Thanks
Related
I'm totally new to this kind of applications, so days ago I followed this tutorial and it worked fine with VLC. But when I tried the web browser check it didn't work.
So I searched for a new solution and found out about Video.js. All the tests that I tried failed, and in the last one, I got the message : The media could not be loaded, either because the server or network failed or because the format is not supported. The video is in MP4 format, how do I deal with HLS ? Knowing that I tried other scripts that should work fine with MP4 but since Flash is no longer supported it didn't work at all.
My code :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
<source src="rtmp://localhost:1935/vod2/test_video.mp4" type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/#videojs/http-streaming/dist/videojs-http-streaming.js"></script>
<script>
var player = videojs('my_video_1');
</script>
</body>
</html>
Please can you help me, I've been working on this for two weeks now, I've never done this kind of code so please bear with me. Thank you.
This is my index.html file
<html>
<head>
<title>VR Sample</title>
<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
</head>
<body>
<div id="vrview">
<iframe width="100%"
height="300px"
allowfullscreen
frameborder="0"
src="http://storage.googleapis.com/vrview/index.html?image=ffff.jpg&is_stereo=true">
</iframe>
</div>
</body>
</html>
And this is the structure of the website folder
I tried hosting it in Webserver for chrome as per the instructions in the google codelabs. But I clicked the 127.0.0.1.8887 url, I got a blank page with no files or folders. Then I tried hosting it on XAMPP and It did work. However, I did not get the panaroma image. Instead I got this error
I took the 360 image with google camera app and converted it to stereo with the google's online converter but got the same error. I also tried downloading the VRView repo from github and modified the code as
src="vrview/index.html?image=ffff.jpg&is_stereo=true"
that too didn't work.
You are using the iframe version of vrview meaning when you request "ffff.jpg", you are actually requesting:
http://storage.googleapis.com/ffff.jpg
Try using the javascript version
Try this:
<html>
<head>
<script src="http://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
<script>
window.addEventListener('load', onVrViewLoad);
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
image: 'http://storage.googleapis.com/vrview/examples/coral.jpg',
is_stereo: true,
width: '100%',
height: 300
});
}
</script>
</head>
<body>
<div id="vrview"></div>
</body>
</html>
Note: chrome cannot access files off a harddrive.
EDIT: This is due to CORS.
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.
Thanks to #Eleanor Zimmermann for noting this.
I am trying to test Ooyala HTML5 Player using Google Chrome v45.0.2454.85 m. I signed in using a trial account of Ooyala and uploaded one video in the Backlot UI that has .mp4 extension.
There is one Basic HTML5 tutorial to view the Ooyala player. I followed that tutorial but I am getting the below error when I am trying to test the webpage:-
"Invalid Content Specified. Error #2048".
I am using Tomcat as local server on my machine.
Here is the code
<!DOCTYPE html>
<html>
<head>
<title>My Test Player V3 Web Page </title>
</head>
<body>
<script src='http://player.ooyala.com/v3/a163e2d9a4b6427e9baad33e86d94136'></script>
<div id='ooyalaplayer' style='width:640px;height:360px'></div>
<script>
OO.ready(function() {
OO.Player.create('ooyalaplayer', 'psOWwzeDqaYbIx19WKyhGMigX7uyg_yS');
});
</script>
<noscript>
<div>
Please enable Javascript to watch this video
</div>
</noscript>
</body>
</html>
Can anybody help to solve this?
Thanks.
I want to use the Kaltura standalone HTML5 player with the VAST/VPAID ad support modules, but I'm at a loss. I'm not at all familiar with the Kaltura architecture, and thought I've found lots of detail and discussion in the Kaltura support documentation and community forums, I'm not having any luck getting it work. (Ex: http://www.kaltura.org/ad-support-integration)
I've setup the HTML5 player (kaltura-html5player-widget.1.6a_0.zip) in a local environment (running Apache and PHP on Linux), and I've downloaded the AdSupport modules from GitHub (https://github.com/kaltura/mwEmbed/tree/master/modules/AdSupport), but can't figure out how to load the AdSupport modules for use in the player.
Here's what I have so far, but nothing is loading:
<head>
<title>Simple Video Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Include jQuery -->
<script type="text/javascript" src="../jquery-1.6.4.min.js" ></script>
<!-- Include the css and javascript -->
<style type="text/css">
#import url("../skins/jquery.ui.themes/kaltura-dark/jquery-ui-1.7.2.css");
</style>
<style type="text/css">
#import url("../mwEmbed-player-static.css");
</style>
<script type="text/javascript" src="../mwEmbed-player-static.js" ></script>
<script>
mw.load("modules/AdSupport/resources/mw.AdLoader.js",function(){
mw.AdLoader.load( 'http://path/to/vast/ad.xml', function( adConf ){
// Now you can call addAdToPlayerTimeline with the adConf
mw.addAdToPlayerTimeline( embedPlayer, ['preroll', 'bumper','overlay', 'postroll'], adConf );
});
});
</script>
</head>
<body>
<h3>Simple video sample</h3>
<video id="vid1" width="480" height="300"
poster="http://www.iana.org/_img/2013.1/icann-logo.svg"
durationHint="33"
>
<source src="http://path/to/video.mp4" type="video/h264" />
</video>
</body>
The kaltura player support VAST/VPAID out of the box both javascript [html5] & flash.
in order to use it please get the latest from our main repository here : https://github.com/kaltura/mwEmbed
In order to use kaltura player without kaltura backend we develop a proxy layer that will enable you to decide from where do you want to get the video metadata and sources. this layer is still under development/qa but if you want to experience with it :https://github.com/kaltura/mwEmbed/tree/proxyPlayer
all the player details + API is on player.kaltura.com site.
we also have a nice studio in our KMC(management console) where you can configure your player and take the configuration for your own needs.
let me know if more details is needed.
thanks,
Probably not an answer you are looking for, but it looks like this is impossible without the Kaltura backend:
http://forum.kaltura.org/t/running-kaltura-standalone-player-with-vpaid-support/837
I am chasing the same, trying to find the HTML5 / Flash standalone player with the VPAID support.
I'm trying to implement videoJS in the HTML5 Boilerplate. I've tried pasting the embed code suggested by videoJS but the results don't work. When the page loads the "poster" image appears but the loading wheel never stops and the video never plays.
I've tried including this in the header and footer to get the video started, but it hasn't worked:
<script>
window.onload = function() {
var pElement = document.getElementById("#vid");
pElement.play();
};
</script>
I've also included all the video.js ref links in the header:
<!-- Link to Video JS Library -->
<script src="js/mylibs/video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
<script type="text/javascript" charset="utf-8">
// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();
</script>
Does anyone have an example of good HTML5 video implementation with the HTML5 Boilerplate template. Admittedly I'm a noob so I apologize if this question seems kind of daft.
Thanks for your help!
You should probably not be including them in <head> and footer. You should just include that script you pasted at the beginning at the bottom after that video.js ref links set of scripts.
You can always paste your code at http://jsfiddle.net and ask again so it can be fixed more quickly.