Hello I'm trying to implement a jwplayer on a website when i tested it local with a single html page everything worked great and here is the working test code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>JWPlayer test</title>
<script src="http://tms.localhost/NSwQRmZDEeOchiIACmOLpg.js"></script>
</head>
<body>
<div id='playeriybxxXWkOtaN'></div>
<script type='text/javascript'>
jwplayer('playeriybxxXWkOtaN').setup({
file: 'http://tms.localhost/video.flv',
image: 'http://tms.localhost/image.jpg',
title: 'Razer',
width: '100%',
aspectratio: '16:9',
fallback: 'false'
});
</script>
</body>
</html>
However when i tried to use it through a cms specifically liferay it didn't work. I uploaded a video through the cms control panel and the generated link for the video was:
http://localhost:8080/documents/10180/0/test-video/a3690397-1d28-4225-9a5c-7d13dba7c789
I assume it has to do something with the link? but when i try it on my browser the video downloads perfectly fine.
What am I doing wrong here ?
check this
http://www.longtailvideo.com/support/jw-player/28836/media-format-support
the page says:
"The JW Player tries to recognize a file format by its extension (e.g. .mp4 for MP4 videos). If the extension of your files is not recognized, the player will display an error. However, if you know your file is in a supported format, you can use the type playlist option to force the player to recognize the file as being of that format."
In your case the generated link for the video has no extension, so JW Player doesn't know how to play it.
Related
I trying to display my ppt for long time where the screen should run continuously in web page without using Google Docs or Skype Drive where the ppt file and html page is in my local folder but it is not showing in web page. The code is below :
<!DOCTYPE html>
<html>
<body>
<iframe src="lp.ppt" width="800px" heigt="600px" name="iframe_a"></iframe>
</body>
</html>
can anyone help to display ppt in html page.
I'd recommend the official View Office documents online
For embedding you can simply use code like below:
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src={urlencode(site-to-ppt)}' width='962px' height='565px' frameborder='0'></iframe>
My test.html file:
<html>
<head>
<title> my title </title>
<script> type="text/javascript" src="/openflashchart/js/swfobject.js"</script>
</head>
<body>
<tr>
<td>
<script type="text/javascript">
swfobject.embedSWF("/openflashchart/open-flash-chart.swf","my_chart","480","360","9.0.0","expressInstall.swf",{"data-file":"data.json"});
</script>
<div id="my_chart"></div>
</td>
</tr>
...blabla
</body>
</html>
I place openflashchart in the home directory of apache, i.e., /Library/WebServer/Documents/. This html file and the json data to be loaded are placed in Documents/Data/myfiles. This page is supposed to be displayed with a curve. However, there is nothing as I visit http://localhost/Data/myfiles/test.html.
Update
Now I know that the reason is that I didn't install Adobe Flash Player, while this package is flash based. Untill now I cannot successfully install Adobe Flash Player on my mac. But that's another problem.
Since chrome has built-in support for flash, this page can be displayed properly with it. I still has probelms with safari and firefox.
I want to store the webpage into png file using javascript.I tired with the below sample code. but what is the issue is when I am downloading it's downloading extension is image/octet-stream but during downloading the file I want to store the image in png format.How can i download the image from image/octet-stream extenstion to png extension.
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>html2canvas example</title>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/excanvas.js"></script>
<style>
canvas{border:1px solid #222}
</style>
</head>
<body id="target">
<a class="upload" >Upload to Imgur</a>
<a href="#" download="testXXX.jpg" onclick="printImg()" ><img src="images/print-icon.png" alt="Print" width="16" height="16" ></a>
<h2>this is <b>bold</b> <span style="color:red">red</span></h2>
<p> Feedback form with screenshot This script allows you to create feedback forms which include a screenshot,
created on the clients browser, along with the form.
The screenshot is based on the DOM and as such may not be 100% accurate to the real
representation as it does not make an actual screenshot, but builds the screenshot based on the
information available on the page. How does it work? The script is based on the html2canvas library,
which renders the current page as a canvas image, by reading the DOM and the different styles applied
to the elements. This script adds the options for the user to draw elements on top of that image,
such as mark points of interest on the image along with the feedback they send.
It does not require any rendering from the server, as the whole image is created on the clients browser.
No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
</p>
<script type="text/javascript">
function printImg(){
html2canvas( [ document.body ],{
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png").replace("image/png","image/octet-stream;base64");
window.location.href=img;
}
});
}
</script>
</body>
</html>
I'm afraid this is just how toDataURL works.
See the following question for an answer with a somewhat ugly solution:
Name a PNG file saved from Canvas using an "open with" dialog
(the href in the answer would point to the 'img' var in your javascript)
I have try to add videoJs to my site to play MP4 files, all works perfectly in Chrome but when I go to Firefox (which doesn't support MP4 files) the flash player stay on a black screen and buttons do nothing.
Simple question: why?
I don't understand, websites like vine.co or instagram use videoJs with no issue but for me this is not the case.
So I tried to change the tech order, now Flash always try to read the video but even on chrome nothing append.
This is my test code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf"
</script>
</head>
<body>
<video id="video" src="http://domain.com/flash/video.mp4" control></video>
<script type="text/javascript">
jQuery(function() {
var player = videojs('video', {"controls": true, "autoplay": false, "preload": "auto", "techOrder": ["flash", "html5"]});
console.log(player);
});
</script>
</body>
</html>
All the files (the swf player, the MP4 video, and the html file) are in the same folder named 'flash'.
Can you help me?
A few things to try here:
Make sure you're loading the video-js css file.
Add the "video-js" and skin classes to your video object as described here (also, it is "controls", not "control"): https://github.com/videojs/video.js/blob/0020ba15b9ae2b60e51d4d8d2751ffa31d18694d/docs/guides/setup.md
If you're loading video js from the CDN, you don't need to set the flash.swf option. That may be causing an issue as well.
You shouldn't need to set the techOrder to get Firefox to behave, and you definitely don't need a corresponding video file for each type of "Tech". Flash will play the fallback in mp4 as long as it's above version 9 or so.
I did run into an issue on Firefox where the Flash fallback would play the video but the video would be blank (audio would play) when I included a "ready" event. I was able to get around this by firing a blur event on the $(this) object. That may be helpful to you if you need to use ready.
You need a flv Version of your Video when you want to deliver it through flash.
It could be usefull to offer another webm Version of your Video. This should bei played in Firefox and Chrome.
For every Tech you need the correspondenting videofile.
Should be a really quick one for you pro's:
I'm learning to use JS, in particular a plugin called (embarassingly) 'Easy Image'.
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
Here's my code:
http://jsfiddle.net/tomperkins/LnES6/
JS files are from here:
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
And obviously jQuery (1.5)
I've stripped it down to the basics and can't figure out why it's not working.
Any tips are much appreciated!
Thanks in advance,
Tom
jquery.js and easySlider.js gets an Server error 500 when the browser tries to load them from
http://customstudiodevelopment.co.uk/jquery-test/
Verify that the files are there and that they can be loaded
http://customstudiodevelopment.co.uk/js/jquery.js
http://customstudiodevelopment.co.uk/js/easySlider.js
Unless both these urls load the right JS files your code will not work ...
As a general tip, get FireBug addon to firefox, with the Net panel I found this error in less than 30 seconds ;)
In menu on the left you have to set your framework to JQuery and in Add resources box add 'Easy Image' script. Then comment out first two <script> tags (you will need them on your site but not on jsFiddle). Also change src attributes in <img> tags to absolute path because there is no images folder nor any images on jsFiddle site.
Edit
This is what you get with <script> tags on your site:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
2<html><head>
3<title>500 Internal Server Error</title>
4</head><body>
5<h1>Internal Server Error</h1>
6<p>The server encountered an internal error
Script doesn't work because there are no scripts on your site (both links are dead).
This is working:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<base href="http://customstudiodevelopment.co.uk"/>
<script type="text/javascript" src="/jquery-test/js/jquery.js"></script>
<script type="text/javascript" src="/jquery-test/js/easySlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
<meta charset="utf-8">
<title>jQuery Gallery Test</title>
<link href="/jquery-test/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="slider">
<ul>
<li><img src="/jquery-test/images/Website-Strip_Future.png"></li>
<li><img src="/jquery-test/images/SR-Toomer_small.png"></li>
</ul>
</div>
<!-- /end #slider -->
</body>
</html>
Note, I put the base element in there to test on my desktop. It's not required for it to work on your server, but if it's on your desktop computer, it should work (so you can copy the html into a Notepad file and save with filetype .html and run it locally to test).
It appears as if your file includes (js/css/image) are not pointing to where you want them to be.
Use Firebug to test these types of things. When you open the console, you can inspect the scripts included, including open each included file. In this way, you can doublecheck to make sure the browser is able to get to your included files.
http://getfirebug.com/
http://getfirebug.com/wiki/index.php/Script_Panel
http://getfirebug.com/wiki/index.php/File:Script_Panel.png <<< see del-linkrolls.js close to top, right; that's where you select which file to inspect
When I loaded the page I got an ".ready() is not a function" which would mean you are not loading jQuery. Then again I've never fooled around with jsfiddle