I am using JW Player to play videos. But its throwing Error loading player:
HTML5 player not found.
My Code:
<%= jwplayer_assets %>
<div id="mediaplayer", align="center">
</div>
<script type="text/javascript">jwplayer.key="wjl6yMFUQPDP";</script>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "<%= asset_path('player.swf') %>",
file: "<%=#video_url%>",
height: 360,
width: 640
});
</script>
please help me to solve this problem.
Here is a working copy.
You can clone or download it as zip file
https://github.com/shamsulsham89/jwplayer-rails3.2
and run it on your system. But update the browser to latest version so that it supports the html5 otherwise it will throw error.
Steps to run:
1> bundle install
2> rails s
Go to the show page after starting rails server from index page.
Related
I need to use both JWPlayer 6 and JWPlayer 7 in my expressJS, AngularJS project.
Normally each of them works fine individually.
I include them separately in index.html
<script src="/javascripts/jwplayer6.js"></script>
OR
<script src="javascripts/jwplayer7.js" ></script>
<script type="text/javascript">jwplayer.key="xxxx"; </script>
I have player.html and player.controler.js on angular side and I keep JWPlayer configuration object in player.controler.js
$scope.options = {
width: "400px",
aspectratio: "16:9",
autostart: true,
androidhls: true,
image: '/images/04212a71.abcd.png'
};
$scope.file = $sce.trustAsResourceUrl(url);
In player.html file, I have
ng-jwplayer directive to display players and,
<div>
<uib-tabset justified="true" style="padding-top: 45px;" >
<uib-tab heading="JWPlayer 6" select="changePlayer(jwp=7)"></uib-tab>
<uib-tab heading="JWPlayer 7" select="changePlayer(jwp=6)"></uib-tab>
</uib-tabset>
bootstrap Tab, I want to switch between players, when I select the Tab.
I used $rootscope in player.controller.js and ng-if in index.html to use custom jwplayer6 or jwplayer7, but it didn't work.
Also I tried to import custom jwplayer scripts in player.html, it also didn't work.
Does anyone have any idea how to include and manage both jwplayer6 and jwplayer7 in same project?
Thanks
I handled it using iframe. I keep player scripts in .ejs file and call them with an iframe in angular side. It works perfect.
I am trying to get the jwplayer with mpeg dash support working but am having some trouble with that.
I am encountering the following error when the page loads :
Error loading player: No playable sources found.
The jwplayer player code is as follows:
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: 'http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd',
dash: true,
width: 640,
height: 360
});
</script>
I will appreciate any feedback to help me fix this problem.
You need a div in there which anchors the location for the player:
<div id="myElement"></div>
with your script and the div element mentioned above it plays fine for me using JWPlayer7:
<div id="myElement"></div><script type="text/javascript">var playerInstance = jwplayer("myElement");playerInstance.setup({file: 'http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd',dash: true,width: 640,height: 360});</script>
I tried playing DASH stream (http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd) in Chrome Canary browser using online JWPlayer test player which is provided and hosted by JWPlayer themselves and stream did work for me without any issue.
Please help me to understand how to install the Seriality Plugin (www.zambetti.com/projects/seriality/) in Chrome or Firefox.
I want to read from a COM Port on the client side of a web page.
Take a look at the Google code site, this site contains the DMG file you can use to install the Seriality.plugin file.
https://code.google.com/p/seriality/
You can also see the sample source on the site that shows the javascript to use the plugin, below is a snippet shown on the site that prints "Hello World" to the first port seen on the system at a baudrate of 9600 when this HTML file is loaded.
<html>
<head>
<script type="text/javascript">
function setup()
{
var serial = (document.getElementById("seriality")).Seriality();
serial.begin(serial.ports[0], 9600);
serial.write("Hello World");
}
</script>
</head>
<body onload="setup();">
<object type="application/Seriality" id="seriality" width="0" height="0"></object>
</body>
</html>
I am attempting to embed a Youtube Video inside a webpage. I am using the Youtube Javascript API to embed/load the videos.
My Problem: The video embeds inside Internet Explorer but there are many javascript errors when I inspect the console. These errors mean I cannot replay the video, make the video grow, or really do anything. These javascript errors do not occur in Firefox or Chrome just IE.
Console Error:
SCRIPT87: Invalid Argument.
www-embed-player-vf1m....js line 211 character 405
Heres my JSFiddle that demonstrates the problem. Remember to RUN it in IE to see the problem.
My code:
<html>
<head>
<script src="https://www.youtube.com/player_api" type="text/javascript"></script>
<script type="text/javascript">
function loadYouTubeVideo(uid) {
setTimeout( function() {
var id = uid;
var instPlayer = new YT.Player(id, {
height: '240',
width: '426',
enablejsapi: 1,
suggestedQuality: 'highres',
videoId: uid});
}, 500);
}
</script>
</head>
<body>
<p>Run in IE and look at console</p>
<div id="Go3u2zw6fbE"></div><script> loadYouTubeVideo("Go3u2zw6fbE"); </script>
</body>
<html>
The problem was that I was running the Javascript code from a local HTML file and not from a HTML file over the internet.
I guess when you run the Youtube Javascript API in a local HTML file (inside Internet Explorer only) the youtube video wont play. Even if I click 'Allow Javascript' it still wont play.
I'm trying to embed kennydude's JavaScript Photo Sphere viewer (https://github.com/kennydude/photosphere) into a Contao CMS 2.11-based web site. I'm basically using the following code from his test.html which I adapted for the specific site:
Berechnen
<div id="sphere" style="width: 100%; height: 300px;"></div>
<script src="http://www.***.tld/tl_files/labor/scripts/three.min.js"></script>
<script type="text/javascript" src="http://www.***.tld/tl_files/labor/scripts/sphere.js"></script>
<script type="text/javascript">
document.getElementById("goForIt").onclick = function(){
sphere = new Photosphere(this.getAttribute("href"));
sphere.loadPhotosphere(document.getElementById("sphere"));
return false;
};
</script>
I pasted that code into a .tpl file which has been uploaded to my templates folder and I'm embedding it via {{file:code.tpl} in a "custom HTML" content element.
However, it doesn't work - the link is visible in the frontend page, but it doesn't make the Photo Sphere load - however, it just redirects me to the sphere's JPG file.
How can I properly embed the sphere in my Contao frontend page?
Thanks in advance!