Iam using JW Player in the website to play youtube videos. I have used embed code for that. It is working properly in all browsers when executing the file from my local diretory. But it is not working in google chrome when executing the file from the server. Below is the code.
<embed id="ply" height="384" width="430" flashvars="autostart=true&repeat=always&file=http:/www.youtube.com/watch?v=cNBFihPwThM&screencolor=000000&backcolor=000000&frontcolor=ffffff&skin=http://www.creatingafamily.org/modules/mod_jwmedia/skins/snel.swf" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="ply" style="" src="http://www.creatingafamily.org/modules/mod_jwmedia/player.swf" type="application/x-shockwave-flash"/>
Please help to achieve this. Thanks in advance.
First of all , we should let jwplayer's javascript to build the html code.
Initilaize jwplayer with js, and use HTML5 video in html like this:
<center>
<video controls="controls" id="container" poster="http://www.example.com/yourvideothumbs/videothumb.jpg" width="693" height="388">
<source src="http://www.example.com/videos/jourvideo.mp4" type="video/mp4" />
</video>
</center>
Javascript:
if(navigator.userAgent.toLowerCase().match(/(android)/) || navigator.userAgent.toLowerCase().match(/(chrom)/) ){
//wee must force flash video player in chrome, because mp4 video files is not supported yet in chrome's HTML5 video implementation.
modes = [{type: 'flash', src: '[JWPLAYERBASEDIR]/swf/player.swf'}];
}else{
modes = [ {type: 'html5'},{type: 'flash', src: '[JWPLAYERBASEDIR]swf/player.swf'}];
}
jwplayer("container").setup({
'modes':modes,
});
This worked me in all browsers. jwplayer can conform if is HTML5 supported or not.
Or the below with forced HTML4 implementation:
<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
modes = [{type: 'flash', src: '[JWPLAYERBASEDIR]/swf/player.swf'}], //force flashplayer for video
image: "yourvideothumbs/videothumb.jpg", //poster image
file: "videos/jourvideo.mp4", //video file
height: "693", //set height in px
width: "388" //set width in px
});
And in setup you can set skin, controls, autostart anything you want:
http://www.longtailvideo.com/support/jw-player/28839/embedding-the-player/
Related
I have used iframe for view multiple image with in the frame and I want to hide the Horizontal Scroll Bar. I Have used following code snippet.
<div class="framepart">
<iframe src="http://docs.google.com/gview?url=http://www.puthuvannam.com/vendors/sample/documents/<?php echo $res['name'];?>&embedded=true" style="width:600px; height:500px;overflow-y:hidden;" scrolling="no" style="overflow:hidden" frameborder="0">
</iframe>
</div>
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
scrolling="no" will work in IE10, Chrome 25 and Opera 12.12.
However the <iframe> scrolling attribute is not supported in HTML5, even though most browsers understand it.
See this article to learn more on scrolling.
I think I found the problem.
I changed the src of the <iframe> to http://docs.google.com/gview?url=http://www.google.com/&embedded=true (http://jsfiddle.net/U8JCj/2/).
By inspecting this in Developer Tools, it can be seen that it is not the <iframe> that has an overflow, but the inner <div id="content-pane"> which has overflow: auto. As this is internal to Google Docs, it is not a style you can change, and therefore there is no solution to this (while using Google Docs).
I was trying to set a dynamic height to an iframe but it always fail; I'm looking for an iframe alternative that retrieves contents from webpage and display it in the holder page with dynamic height. Any suggestions?
Add this to your <head> section
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe name="Stack" src="http://stackoverflow.com/" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
search for responsive Iframe on google. There are a lot of tutorials and examples out there.
height:100%; will be an important keyword
Javascript:
jwplayer("mvcontainer").setup({
flashplayer: "https://media.dreamhost.com/mp5/player.swf",
file: "video_file.flv",
icons: true,
autostart: true,
controlbar: "bottom",
height: 406,
width: 628
});
HTML:
<div id="mvcontainer"></div>
The above coding is using to play flv video in my site. This coding working correctly but I have a problem. I removed the video then replaced some content in same page. The video is not stopped, it continuously playing in background.
How do I stop it?
Try using this
jwplayer().remove();
or
jwplayer().stop();
There's JW Player JS API Documentation
how can I adjust the width and height for all iframe that has only youtube link
<iframe width="420" height="315" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/xbGv2T456dfg3">
because I have some the uses iframe also but I only need to adjust all iframe that has a youtube link.
css
iframe {width:560px;height:316px;}
need help on this
Use an attribute selector:
iframe[src^=http://www.youtube.com] {
width:560px;
height:316px;
}
If the link might be https, or some other variations, you can use the more liberal *= selector:
iframe[src*=.youtu] {
width:560px;
height:316px;
}
I have following file (not including PHP here as I know it works fine):
<script type='text/javascript'>
function stopUpload(){
document.getElementById("adpictureholder").innerHTML += 'test';
return true;
}
window.top.window.stopUpload();
</script>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
Basically, I'm uploading the picture to the server inside an iFrame (so that page doesn't reload).
Why does stopUpload() run 3 times in Opera while working once in other browsers?
its because of given src="#" in iframe. remove it or change it to "" or any other specific url.
<iframe id="upload_target" name="upload_target" style="width:0;height:0;border:0px solid #fff;"></iframe>
Use a complete file upload solution like dropzone.js.