I am getting 40 videos on load of page and using foreach loop for displaying, below is my html code of displaying video
<div id="videosList">
<div class="video" data-id="{{$i}}">
<div class="videoSlate">
<video id="videoDiv{{$i}}" class="thevideo"
preload="metadata"
poster="/{{$postDetails->video_thumbnail}}" loop>
<source src="/{{$postDetails->videos}}">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
and on mouseover to video i am playing the video and on mouseout i am stopping the video here is the javascript code for play and pause
<script>
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item) {
item.addEventListener('mouseover', hoverVideo, false);
item.addEventListener('mouseout', hideVideo, false);
});
function hoverVideo(e) {
$('.thevideo')[$(this).attr("data-id")].play();
}
function hideVideo(e) {
$('.thevideo')[$(this).attr("data-id")].pause();
}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
each video size is not more than 6 mb, now the problem is for loading page it will take around 1 min, and for playing video on hover it will take around 15 to 20 seconds to play, is there any way to reduce the loading time and video playing time. I am using laravel framework, in local its working but in server it giving problem.
I don't know why you need 40 videos in the same page, but I would not at all recommand that:
YOUTUBE:
Youtube doesn't display 20 videos per page, but 20 placeholder images that are used as link to click on in order to display the video. It is pretty UX friendly, since loading time is considerably reduced (images instead of videos) and users can choose what they load.
FACEBOOK, TWITTER, ETC...:
Social networks such as Facebook, Twitter, etc are using a scroll script, which loads videos only when they are visible by the user. This means that if there are 100 videos on the page, only one or two will be loaded and displayed, because this is useless to load stuff that the user can't see (even more if this is a heavy file, such as a video). This can be done with Javascript or jQuery (Here is a pretty cool question which gives you a solution).
I really recommand you to choose one of those two approach, since I can't figure out a case which requires to display 40 videos on one page with one load.
Related
I would like to create 2 different audio players, 1 large and 1 small. I would like to be able to set which one to display directly in the HTML by setting a class.
The large one should have a play/pause button icon and progress bar that will take up it's own line on a webpage. The small one only a play button icon (using SVG) that toggles based on the current state (playing or paused) that can be displayed inline on a webpage.
This is the HTML I would ideally like to be able to use:
<audio class="small">
<source src="mysound.ogg" type="audio/ogg">
<source src="mysound.mp3" type="audio/mpeg">
</audio>
I have been playing around with it, this is the closest I have been able to get:
<div class="audio">
<audio id="player" src="mysound.mp3"></audio>
<a id="button" title="button">Play</a>
</div>
<script>
$(document).ready(function() {
var playing = false;
$('a#button').click(function() {
$(this).toggleClass("down");
if (playing == false) {
document.getElementById('player').play();
playing = true;
$(this).text("Pause");
} else {
document.getElementById('player').pause();
playing = false;
$(this).text("Play");
}
});
});
</script>
There are several issues with the above code:
Once the audio finishes playing "Pause" does not toggle back to
display "Play".
If there are multiple players on the page it doesn't
target this.
It's clunky and requires the person writing the page
to add lots of code. I would like to move most of this to JS and
CSS.
I feel that I'm on entirely the wrong track, but I can't find good documentation for making this simpler.
I am making a slideshow with Reveal.js. According to the docs (https://github.com/hakimel/reveal.js/), you are supposed to use data-src for lazy loading. How can I utilize lazy loading and play the audio with JS?
This is what I tried but it didn't play the audio:
<section>
<audio id="audio2" controls><source data-src="http://opengameart.org/sites/default/files/foom_0.wav" type="audio/wav"></audio>
<script>
var x = document.getElementById("audio2");
x.play();
</script>
</section>
Your script is executed at the time the presentation is loaded, at which time presumably the lazy loading hasn't happened yet and so the file cannot be played.
If you want to automatically play the audio file when the slide is shown, you should run your x.play() in the callback of the event emitted by Reveal upon showing the slide:
Reveal.addEventListener( 'slidechanged', function( event ) {
if (event.indexh === mySlideNumberWithAudio) { // might need to check indexv too
document.getElementById("audio2").play();
}
} );
I am using player.onError event handling (JWPlayer 6) to load a error.mp4 video when our livestream is offline or not available.
Problem with this is that the error video is reloaded once it ends which creates 1-2 seconds of loading time and doesn't look good.
I read in few posts in JWPlayer forum that its possible to show a image aswell or even replace the player itself with a custom image in event handling, but none of the posts in forum actually provided the way to do so.
My current code is as follows:
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: "rtmp://62.210.247.57:1935/live/live",
title: 'OneStream',
});
console.log('Error1');
playerInstance.onError(function(){
console.log('onError');
playerInstance.load({file:"streamError.mp4",image:"http://content.jwplatform.com/thumbs/7RtXk3vl-480.jpg"});
});
playerInstance.onComplete(function(){
console.log('onComplete');
playerInstance.load({file:"rtmp://62.210.247.57:1935/live/live",image:"http: //content.jwplatform.com/thumbs/7RtXk3vl-480.jpg"});
});
</script>
I want to use a static error.png image so I can use the onBuffer event or such to check the RTMP livestream in realtime and when its online, load it instead.
I'm trying to make a kisok application to show some slides and play 2 videos from a menu using reveal.js. it is all working well and looks great apart from the video playback.
Im using a <video> tag inside the <section> as the data-background-video="something.mp4" didn't seem to restart on slide change either.
If i'm navigating out of the playing video slide and then returning to it, the video resumes where it left off and doesn't restart at the beginning as I require like even though autoplay is set to true.
I have tried to write something that does this with javascript using the api on Reveal.addEventListener after naming the <section> with data-state="something" and it works.. well kind of.. it works successfully for the first video only, well, then only for a while then it seems to break all video playback. the second video plays once then will not restart and i then can not control it via the console either.
here is the relevant html:
<!--*********************************************************Video 1 Page-->
<section id="rene_vid_page" data-state="video1_show" data-transition="fade-in fade-out" data-background="img/Backdrop.svg">
<h1 class="page_title">My page title</h1>
<video id="rene_vidplayer" data-autoplay data-src="Videos/full_edit_portrait.mp4" ></video>
<!--*********************************************************End Of Video 1 Page-->
<!--*********************************************************Video 2 Page-->
<section id="conc_vid_page" data-state="video2_show" data-transition="fade-in fade-out" data-background-color="#c8c8c8">
<h1 class="page_title">My page title</h1>
<video id="conc_vidplayer" data-autoplay data-src="Videos/2 Conclusions.mp4" ></video>
</section>
<!--*********************************************************End Of Video 2 Page-->
Here is the javascript i have cobbled together,
this also advances to the next slide when the video is finished and that bit works..
<script>
var video = document.getElementById("rene_vidplayer");
video.onended = function (e) {
console.log("video_ended slide advance");
Reveal.next();
};
Reveal.addEventListener('video1_show', function (e) {
// Called when "video1_show" slide is made visible
console.log('"rene video show has been called"');
video.currentTime = 0;
console.log('"videotime set to 0"');
video.play();
console.log('"video set to play"');
});
var video2 = document.getElementById("conc_vidplayer");
video2.onended = function (e) {
console.log("video2_ended slide advance");
Reveal.next();
};
Reveal.addEventListener('video2_show', function (e) {
// Called when "video2_show" slide is made visible
console.log('"video2_show has been called"');
video2.currentTime = 0;
console.log('"videotime set to 0"');
video2.play();
console.log('"video2 set to play"')
});
</script>
I can see in the console that the logs i have put in are working in the right places but the video stops behaving :( the second video will run from video2.play() in the console but only if the first one hasn't finished or the second one been played already.
You can tell that my js coding is not great at the moment and there are probably so many errors, and ultimately a much better way of doing this.
Any help or advice is greatly appreciated as it is desperately needed for a show next week!!
Ok, so i got this to work by adding a video.load() and video2.load() into the respective Reveal.addEventListener sections. Not sure if there are any problems associated with doing it this way or whether there is a better way?
However this is now working fine! :)
I've been using SublimeVideo, and I've done so much with it already for the site I'm working on.
I've got 15-20 videos that I'm successfully using via SublimeVideo on a site in the basic way, by having a link on the page the user clicks on, and when clicked, the video opens in the SublimeVideo lightbox and starts playing.
But now, I'm needing to create "shorter URLs" for these videos that can be sent out in print publications and emails, and where the user is taken to the website to view, not just the video file.
Ideally, I was hoping to just use the id/data-uid with a hashtag in a single-page url and have the chosen video to automatically launch'n'play within the lightbox. That seems to be impossible (?).
I could settle with having a single page with the video tags hidden and have the hashtag unhide it and play it when in the URL. If none of this can work in a slick way, maybe I'll just go old-school and make a page for each video and just embed it in the page..
Anyway, after scouring all the documentation pages, their forums, and searching the web, I've only found a couple of options - neither of which have actually worked. I'll paste them below:
First, here's an example of the HTML I'm using for all the videos:
<p class="">video1 text link on page</p>
<video id="video1" data-uid="video1" title="video1 description" poster="/assets/images/video1.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/video1.mp4" />
</video>
That, by itself, works great! I don't want to change that. When the text link is clicked, the lightbox opens and the video plays perfectly.
So, let's say the page that holds the 15-20 videos with the above code for them is at:
http://example.com/resources/index.php
I thought I could simply make that URL for the first video:
http://example.com/resources/index.php#video1
...or even better...
http://example.com/resources#video1
...and follow suit for all the other video IDs.
And to get that to work, I've tried:
<script type="text/javascript">
sublimevideo.ready(function()
{
if (window.location.hash == '#video1') {
sublime('video1').play();
} else
if (window.location.hash == '#video2') {
sublime('video2').play();
} else
if (window.location.hash == '#video3') {
sublime('video3').play();
}
});
</script>
...that doesn't work. For some reason it works with whatever the first video is on the page, but by "work" I mean, it unhides it and makes it playable, not open in the lightbox and auto play.
So then I found code in the sharing documentation area like this:
<script type="text/javascript">
var hashtag = "#video1";
var hashtag = "#video2";
var hashtag = "#video3";
if (document.location.hash == hashtag) {
showTheVideo(hashtag);
}
function showTheVideo(hashtag) {
}
</script>
...but that doesn't work either.
Could somebody that does know JavaScript please spell it out for me?
I'll put the code that fixed the issue for me here in hopes it helps somebody else someday that may search and find it.
By putting the below code in the head of the page, under the...
<script type="text/javascript" src="//cdn.sublimevideo.net/js/UniqueIDprovidedInYourAccountGoesHere.js"></script>
...library (which is the random characters/numbers .js that SublimeVideo gives you in your account area), I was able to finally get the above detailed problem to work (YAY!!!).
So, using the same example as above, this URL now works as I needed (by not only taking you to the resources page, but also by launching the particular video in its lightbox).
http://example.com/resources.php#video=interview2
...and by putting:
RewriteRule ^resources$ resources.php [L]
...in the .htaccess file in the same dir, I was able to make it even easier for the user:
http://example.com/resources#video=interview2
As I understand it, the below JavaScript addition finds the hash, then looks for the "video=", then takes whatever is after that, and if it finds a matching "id" in an "a" tag, then it tells it to do it's SublimeVideo thing by launching that video in the lightbox. Brilliant!
<script type="text/javascript">
$(document).ready(function () {
var lochash = location.hash.substr(1);
var mylocation = lochash.substr(lochash.indexOf('video='))
.split('&')[0]
.split('=')[1];
sublime.ready(function () {
var lightbox = sublime.lightbox(mylocation);
lightbox.open();
});
});
</script>
Here's the HTML part (for reference):
<p class="">video2 text link on page that i left as reference for the user in case they close the video that was launched from the publication</p>
<video id="video2" data-uid="video2" title="video2 description" poster="/assets/images/interview2.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/interview2.mp4" />
</video>
Also note: I found out through trial and error that the name of the video in the URL, after the "#video=" must be the same as the "ID" in the "A" tag, not the "video" tag! So, you'll notice that the "id=" is (and needs to be) different between the two. The "id=" in the "video" tag is instead the same as the "href=".