In html page,I can embed vlcplugin as mentioned in videolan page, and get the reference to plugin using jquery.
But it seems that the play(), pause() methods are supported only by vlcplugin upto 0.8.5. How do you play and pause a recent version of plugin?
<embed id="vlcp"
type="application/x-vlc-plugin"
pluginspage="http://www.videolan.org"
name="VLC"
autoplay="no"
loop="no"
volume="100"
width="640"
height="480"
target="test.flv">
</embed>
<a id="playbutton" href="#">Play</a>
<a id="pausebutton" href="#">Pause</a>
I can get reference to the plugin as below
var player = document.getElementById("vlcp");
Now, what do I call to make the embedded plugin play the clip?
I am using firefox as browser, will embedding vlcplugin in html work in chrome ?
You have to use the Playlist object of your VLC player as showed here.
In your particular example, you didn't really create an actual playlist, but you implicitly added one item to it (your "test.flv").
Here's how you can now control your movie (regardless of whether it's Mozilla, Chrome, or IE) - code in CoffeeScript:
player = document.getElementById("vlcp")
if player and player.playlist
// you could also check whether the playlist isn't empty using
// player.playlist.items.count
playlist = player.playlist
// pick whichever action you need from below
playlist.play()
playlist.togglePause()
playlist.stop()
You can also check whether the player is currently playing or paused/stopped by using
// assuming you got the playlist like above
playlist.isPlaying
Here is a demo example:
<html>
<head><title>Demo of VLC mozilla plugin</title></head>
<body>
<h1>Demo of VLC mozilla plugin - Example 1</h1>
<embed type="application/x-vlc-plugin"
name="video1"
autoplay="no" loop="yes" width="400" height="300"
target="http://server.example.org/video1.vob" />
<br />
<a href="javascript:;" onclick='document.video1.play()'>Play video1</a>
<a href="javascript:;" onclick='document.video1.pause()'>Pause video1</a>
<a href="javascript:;" onclick='document.video1.stop()'>Stop video1</a>
<a href="javascript:;" onclick='document.video1.fullscreen()'>Fullscreen</a>
</body>
</html>
Other useful sources/links:
http://www.videolan.org/doc/play-howto/en/ch04.html
http://www.w3.org/2010/05/video/mediaevents.html
Related
I've a play-button inside Image. Onclick it shows youtube video in light-box. I just replaced youtube video with my own video from video directory that is under public folder. When i click on play button, it returns below error.
blade.php
<div class="container">
<div class="col-lg-5 order-2 order-lg-1 align-items-stretch video-box" style='background-image: url({{URL::asset('src/img/product3.png')}})' data-aos="zoom-in">
</div>
</div>
When I changed my anchor tag with video, it open light-box but still video is not playing, just loading..
<video src="{{URL::asset('src/video/Car-Chain Product 2 ENG.mp4')}}" class=" play-btn" data-vbtype="video" data-autoplay="true"></video>
How can I resolve this please?
I'm building a page that has links on the left of the screen that target an iframe. They work just fine in the new IE, but not at all in FireFox. I've played around with their Z-index, but can't seem to get them to be recognized in FireFox. They don't just not work, but the mouse cursor doesn't even show that they are links on hover. The address for the page I'm working on is at the address below.
http://www.snoscoot.com/fcaccessories/hondapowerequipment/test.html
An example of the code for one of the buttons is as follows:
<A HREF="http://www.snoscoot.com//fcaccessories/hondapowerequipment/subcompacttractorpartsandinformation.html" TARGET="productdisplay"><IMG SRC="http://www.snoscoot.com/fcaccessories/hondapowerequipment/hondatractorparts150px.jpg" border="0">
<font size="3" color="black" face="Arial">Subcompact tractor parts</font></a>
The code I have for the targeted iFrame is as follows:
<IFRAME
SRC="http://www.snoscoot.com/fcaccessories/hondapowerequipment/compacttractorpartsandinformation.html"
NAME="productdisplay"
WIDTH=700 HEIGHT=1622
frameBorder="0"
scrolling="no">
</IFRAME>
Would anyone have some advice as to how to get the links to function in FireFox? I can't seem to figure out why they work in IE, but not in FF.
Thanks
Your iframe inside the <div id="dropdown"> is 1500px tall by 950px wide and hence covers up most of the rest of the page. In particular it's sitting above those links, so they can't be clicked.
Are you sure you want it to be 1500px tall?
I have a single page website which lists a collection of HTML5 audio players. The problem is the site has become slow because the following browsers start predownloading the content (mp3 and ogg)
Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)
I use the basic code to implement the players. Is there a way I can prevent the browsers from predownloading the audio files and only work when they click play?
<audio controls="controls" height="32" width="300" tabindex="0">
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source>
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source>
</audio>
<audio controls="controls" preload="none">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Note - preload="none" - can be used with VIDEO HTML5 and AUDIO HTML5.
The preload attribute is supported in all major browsers, except Internet Explorer and Opera.
MSIE still accounts for some 30% of all web traffic, so preload="none" is only a part solution. In a few pages where I had this problem, I add a small script to my page headers:
<script type="text/javascript">
function addAudio(t) {
var l=t.innerHTML.length;
var audioName=t.parentElement.id;
if( t.children.length==0) {
t.innerHTML=t.innerHTML+' <audio controls="controls"><source src="'+
audioName+'.ogg" type="audio/ogg" /><source src="'+
audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>';
}
}
</script>
and then use DHMTL to dynamically add the audio tag, for example:
<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li>
What this does is to define a list item containing a text span. When the person browsing clicks on the spanned text, the javascript fires and appends the <audio> tag. You could alternatively use the onmouseover attribute so that the audio tag is added on hover.
Add the preload attribute to the generated code if you wish. This is the simple approach, but if you are already using jQuery on your webpage, I note that this offers elegant alternatives.
I would like to have a page with both an image gallery and a slideshow. The slideshow should be started when I click the link, the normal ColorBox should be used when I click one of the images.
What I do now is group all the images with a rel. For the slideshow link I use the following code:
<a rel="slideshow" href="#">Display slideshow</a>
In the configuration for colorbox I define rel as the rel I use for the images. This works almost, the problem I have with this is that I get an extra empty page at the beginning.
How can I start a slideshow of an image gallery, using a text link?
I searched for how to do this for a long time, and finally found the answer on - where else - the F.A.Q for Colorbox. The example is worded a bit differently though so it wasn't as easy to find as you might think. Especially if you're asking question in these terms, like I was.
<div style="display:none;"> <!-- optionally hide this div -->
<a rel="gallery" href="/slideshow/one.jpg">Caption 1</a>
<a rel="gallery" href="/slideshow/two.jpg">Caption 2</a>
<a rel="gallery" href="/slideshow/three.jpg">Caption 3</a>
</div>
<a id="openGallery" href="#">Display slideshow</a>
<script type="text/javascript">
var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
e.preventDefault();
$gallery.eq(0).click();
});
</script>
http://jacklmoore.com/colorbox/faq/#faq-click
Hi I'm trying to modify a web page so that it loads faster.
Since I have some videos embeded (blip.tv but can change it to youtube if it helps) I was wondering if you could load an image where the video should be and on click replace the image with the video and start playing (without reloading the whole page).
I think I've seen this before, but can't find it anywhere anymore!
right now the code to embed I use is:
<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>
Thanks
Quick and dirty: you could just set the embed code as a global variable somewhere:
<script type="text/javascript">
var embedCode = '<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>'
</script>
Then put the image in a container div and replace the container's innerHTML onclick:
<div id="videocontainer">
<img src="yourimage.jpg" onclick="document.getElementById('videocontainer').innerHTML = embedCode;" height="500" width="600" />
</div>
There's a Google code project called SWFObject, which is perfect for what you need. It's a cross-browser javascript library for loading flash - and you could use it to replace your image with the flash video when someone clicks on the image, for example.