I've created one app in HTML5 and javascript for iPad.
I've put links in page, by clicking that will show/hide different youtube videos.
Here is code
In ipad if i hide one youtube video and show another at that time previous video keeps playing in background till new video loads.
I want to stop previous video playing before another video gets loaded.
(I am using latest iOs, that plays youtube video in quicktime player.)
Here
DEMO
var vids = {
vid1:"http://www.youtube.com/embed/87O_YA4rLyk",
vid2:"http://www.youtube.com/embed/nQ2TsPhsWTA"
}
$(function(e) {
$(".video-section ul li").click(function(e) {
$(this).hide();
$(this).siblings().show();
$("#vid").attr("src",vids[this.id]);
});
$("#vid1").click();
});
<div class="videoContain-big">
<p>
<iframe id="vid" width="560" height="315" src="about:blank" frameborder="0" allowfullscreen></iframe>
</p>
</div>
<div class="video-section">
<ul>
<li id="vid1">Click here to Change Video 1</li>
<li id="vid2">Click here to Change Video 2</li>
</ul>
</div>
QuickTime exposes a number of methods to JavaScript. Some take the form of commands that operate on movies, such as Play(),Stop(),Rewind(), and so on. The rest operate on properties of QuickTime as a whole, the QuickTime plug-in, movies, or tracks. Most of these properties can be read or written using complementary Get and Set methods. Other properties, such as the QuickTime version, are read-only.
You can find a lot of information here
Related
I'm trying to display many video thumbnails/posters without actually loading the video...
Bascially what I've got is the following:
<div class="col-sm-3" style="padding: 20px;" onclick='location.href="/videoDetails/{{ #video.ID }}"'>
<video width="100%" style="cursor:pointer;"
<source src="/{{ #video.path }}">
Your browser does not support the video tag.
</video>
</div>
That hole thing is in a foreach loop and with that, it loads up to 100 videos on one page...
My problem now is that this gets super slow, the more videos there are load at once..
Now I found this answer on a StackOverflow thread, where it says to use the attribute preload="none" on the video tag... That seems to speed up the loading (because it doesn't preload the videos), however, it doesn't display any image (preview) at all..
In my case, there's no reason to load the hole video though, because (as you can see in the code), the actual video is then displayed on another page, when clicking on the div.
Also, just to make sure you got me right, I want to display the auto generated preview of the first frame of the video. I can't upload a seperate image to display it with the poster attribute, it has to be the default image..
Is there any way I can achieve this? I'm also open to Javascript/jQuery solutions...
You can get video frames in different time periods with append #t in the video source url. But with the attribute preload none value you cannot get the video frames. So You need to use the metadata value in the preload attribute.
These are the three values you can use in the preload attribute:
none - Hints to the browser that the user likely will not watch the video, or that minimizing unnecessary traffic is desirable.
metadata - Hints to the browser that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, tracklist, duration, and so on) is desirable.
auto - Hints to the browser that optimistically downloading the entire video is considered desirable. - Hints to the browser that optimistically downloading the entire video are considered desirable.
You can check the below results with these three values.
<p>metadata</p>
<video width="300" height="150" controls="controls" preload="metadata">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
<p>none</p>
<video width="300" height="150" controls="controls" preload="none">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
<p>auto</p>
<video width="300" height="150" controls="controls" preload="auto">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
I would say that creating so many video HTML elements will affect performance anyhow, loading or not, since the DOM is under quite heavy pressure.
A different (and more advance) approach I would recommend is the following.
If you want that one image will load when the user clicks on it, you can "create" a video in that specific moment, triggering only the video requested.
So:
instead of the video tag, load an image with onclick listener, that will pass an ID to a JS function
when the user clicks it will create the video element.
at the same time, hide the image (or maybe a gif?)
Try to run the snippet here below :)
function myFunction(id) {
var element = document.getElementById(id);
var videlem = document.createElement("video");
element.innerHTML = '';
source = 'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4';
var sourceMP4 = document.createElement("source");
sourceMP4.type = "video/mp4";
sourceMP4.src = source;
videlem.appendChild(sourceMP4);
videlem.autoplay = true;
element.appendChild(videlem);
}
<p>Click on the image</p>
<div id="img242">
<img onclick="myFunction('img242')" src="https://blog.majestic.com/wp-content/uploads/2010/10/Video-Icon-crop.png">
</div>
So I only want to access the play button of the video controls, no action when pressing the track bar or volume. I want something like this but with html5 video http://flash.flowplayer.org/demos/installation/multiple-players.html
jQuery(document).ready(function() {
$('.vids').click(function(){
$('.vids').each(function () {
this.pause();
});
});
});
<video controls="controls" class="vids" id="1">
<source src ....>
</video>
<video controls="controls" class="vids" id="2">
<source src ....>
</video>
....
So now all videos stop except the one I clicked but when I press the trackbar or volume, it also stops. Any solutions without making my own controls or making use of another videoplayer? I found different solutions but not as I want :S
I think you have to target the current item which you are clicking so that the clicked target get the command to process to do this try this one and see if this works for you:
$('.box').click(function(e){
$(e.target).pause();
});
I'm wanting to change the source of the embedded video when the user clicks on one of the elements in my list of videos. It works fine in FF but in both IE and Chrome, nothing happens. Can anyone tell me how I can get this functionality to work properly across all browsers?
Heres my JavaScript:
function updateSource(id)
{
var video = document.getElementById('video');
video.src=document.getElementById(id).getAttribute('data-value');
}
And Here is my HTML:
<embed id="video" src="https://www.youtube-nocookie.com/v/h5NeJaWR5WA?version=3&hl=en_US&rel=0&showinfo=0"
type="application/x-shockwave-flash" width="480" height="360"
allowscriptaccess="never" allowfullscreen="true"></embed>
<li id="one" class="videoLink" style="margin-top: -1em;" onclick="updateSource(this.id)"
data-value="https://www.youtube-nocookie.com/v/h5NeJaWR5WA?version=3&hl=en_US&rel=0&showinfo=0">
<img class="youtubeThumb" src="http://img.youtube.com/vi/h5NeJaWR5WA/default.jpg" />
<p class="videoTitle">Video Number One!</p>
</li>
<li id="two" class="videoLink" onclick="updateSource(this.id)"
data-value="http://www.youtube-nocookie.com/v/r19okL-IW6Q?version=3&hl=en_US&rel=0&showinfo=0">
<img class="youtubeThumb" src="http://img.youtube.com/vi/r19okL-IW6Q/default.jpg" />
<p class="videoTitle">Video Number Two!</p>
</li>
Solution: http://jsfiddle.net/tuDXg/4/
I don't believe the embed element supports updating the src attribute. You should wrap it in a div and change the div's innerHTML to be a new embed element with the updated src.
Actually, it does look like the number (id value) is the problem. It thinks you're passing an integer (not a string) as an index (not an id value).
How do I simultaneously pause the player AND cause the the containing modal to slide up/away (to "un-reveal")?
Presently, after the play button is clicked, and the modal's upper-left (x)...the & #215;...is clicked...the modal slides away, but the video continues to play. To avoid this, the user must: 1) pause the video, and THEN 2) close the modal. I'd like a click or tap on any of the modal's triggers--for instance, clicking the (x)--to do both actions at the same time. I'm trying to find a solution that will work across platforms / devices.
Here's what I got so far, which is not working...
IN HEAD OF DOM BETWEEN SCRIPT TAGS
document.getElementById("pauseX").onclick = function () {
document.getElementById('player2').pause();
};
TRIGGER TO REVEAL MODAL
Click here to reveal modal.
VIDEO + MODAL CONTAINER
<div id="vid-1" class="reveal-modal">
<div class="center">
<video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
<source type="video/mp4" src="../media/vid-1-480x320.mp4" />
<source type="video/webm" src="../media/vid-1-640x480.webm" />
<object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">
<param name="movie" value="../build/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=../media/vid-1-480x320.mp4" />
<img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1"
title="No video playback. Update browser, enable Javascript, or install Flash." />
</object>
</video>
</div>
<a id="pauseX" class="close-reveal-modal">×</a>
</div>
Already tried many other solutions, including...
Javascript to stop HTML5 video playback on modal window close
...so any help is appreciated. I think it's possible either the MediaElement.js or Reveal.js file may need to be tweaked or something?
Incidentally, clicking anywhere outside of the modal--i.e., on the "gloss"--causes it to slide up/away; hitting the escape key on the keyboard does the same. Clicking anywhere on the video player causes it to pause. Would love it if all of these functions are retained along with tapping on mobile devices. (Haven't tested that yet.)
if you have document.getElementById("pauseX").onclick... at the top of your document probably the code doesn't work because element with id pauseX is not already on the dom. Look at the javascript console, you should see some related error
Try to move these instructions on the bottom or on DOM ready event
Got it solved with this script...
<script>
$('.close-reveal-modal').click(function() {
$('video, audio').each(function() {
$(this)[0].player.pause();
});
});
</script>
There were multiple MediaElement.js vids on each page (one for each potential modal)...each vid being identified with the same id="player2" attribute...which was also keeping the page from validating. Tried switching that in my original script from getElementByID to getElementByName...didn't work. Created a class in lieu of an ID for each player...that didn't work. Irregardless of the validation issues: the above solution--simply inserting the .close-reveal-modal class directly into the "stop all" script for MediaElement.js works great. (Thanks #Fabrizio for suggesting I examine my ID attributes to begin with...)
I had tried the iframe for embedding youtube video in sencha inside the html tag.
....
html:'<iframe>Youtube URL</iframe>'
....
I added the above code inside the second icon of the tab bar. The second icon is a scroll view.i.e i set it to scroll:'vertical'
My Problem is when i add youtube video.It comes like this...
Look.Only Part of the video is shown.
when i switch to other tab panel,the video appears as below.
Any Help!!!
I've done this using HTML inside a panel. of course it doesn't play embedded in the sencha app. It jumps to the youTube player.
html: '<div style="margin-left:12px; margin-top:20px"><h1>Syndicate Trailer</h1><p><iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/ewwtznVkSxA" frameborder="0"></iframe></p><h1>Prometheus Trailer</h1><p><iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/sftuxbvGwiU" frameborder="0"></iframe></p></div>'
This leaves the links in the video frame which didn't suit my app so I modified to use this instead:
html: '<div style="margin-left:12px; margin-top:20px"><h1>Eddies Cinema Slot </h1><p><embed id=\"yt\" src=\"http://www.youtube.com/watch?v=5a9-ORWn0fY\" type=\"application/x-shockwave-flash\" width=\"290\" height=\"260\"></embed></p></div>'