Videos are around 30 seconds long 15mbs, is it possible to have them on a page or should I switch to cover images, I want to use the video as separator smilier to http://themeforest.net/item/luv-responsive-wedding-event-wordpress-theme/full_screen_preview/9410071
Do anyone have any advice or recommendation
A good idea would be to make the videos compressed to their max (like smallest dimensions and framerate while maintaining quality).
If you can, defer the load of the videos until after page load (jquery or javascript) by setting the url of the video after load. What about loading an iframe? This question could be help: should embedding video in home page slow down the page?
You could also stream the video.
Or you can make a cover image, as you said, and load it when the user clicks on it. That could be done something like this:
<video width="520" height="300" poster="link to the cover image" controls>
<source src="link to the video" type="video/mp4">
</video>
Related
I'm making a scroll-able gallery with flask that shows many<video> elements, the video files are small but it still generates a lot of http 206 requests, which are bottle-necking flask.
<img> has loading="lazy", which is very convenient.
Is there some way, javascript only or css, to implement such behavior but for <video>?
I may use preload="none", but it won't display the first video frame.
you may use a part of this solution :
<video preload="none" src="video.mp4"
autoplay="false" poster="poster.jpg"
muted="false" loop="false">
</video>
If preload is none, the web browser don't preload the media, but i advice to replace an image with poster attribute.
Preload explanation here
autoplay explanation here
loop explanation here
poster explanation here
I am trying to get to the bottom of an issue on a 4th generation iPad issue we are having. We keep getting the following error and the page refreshes so there is no way to debug this in developer tools on a mac:
"A problem occurred with this webpage so it was reloaded"
The page uses fullpage.js and renders 22 separate html5 (mp4) videos that run in the background of each full page/section.
Weirdly, if we change the code to only render say 15 videos the page works fine!
The videos are between 500KB and 3MB each. The videos are 33MB in total.
They are embedded like this:
<video id="video-transport" class="video-bg">
<source src="videos/videoname.mp4" type="video/mp4">
<source src="videos/videoname.webm" type="video/webm">
<p class="vjs-no-js"></p>
</video>
Does anyone have any suggestions of what is wrong with the page? Is there some kind of upper memory limit or page size we are exceeding.
Is there an easy way of debugging this?
Thanks,
Phil
No idea why it's breaking, but...
Have you tried using the preload property for the videos to prevent loading them on page load ?
Related question
Or, if that doesn't workf for you, have you though a about using the fullpage.js lazy loading option the videos?
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
</video>
I have a small project of doing some html5 videos embed on a site.
I use a simple HTML video embed code
<video width="560" height="340" controls>
<source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
so my question is that possible to disable the copy URL when you right click on the video?
I know if they really want to get the video link there are ways to do so.
but just at least if I can do that one.
Thanks
You can catch right-clicks via JavaScript and thus prevent the right-click menu.
As you correctly noted though, it’s only a hindrance rather than prevention. HTML5 video is about direct integration into the browser and thus can also be saved like images, for example.
I have this page
http://joewillhelpyou.com
Users click the blue botton and a video page begins to play.
I have it simple. an iframe so the Jquery dows not mess with my tag that I found would not allow me to autoplay the next video, and 2 src for each video. In all the browswers they work okay, only one video is played back mp4 or webm. but in IE I keep hearing two playing back and I cannot figure out why
you can visit the page and tell me if you catch my mistake or a workaround for IE
<div id="videodiv">
<iframe src="http://joewillhelpyou.com/videos/step2/play02_01.html" width="1000" height="750"></iframe>
</div>
then this leads to a page where I have the video
<video controls autoplay width="936" height="624">
<source src="002_001.mp4" type="video/mp4">
<source src="002_001.webm" type="video/webm">
Your browser does not support the video tag.
</video>
under normal situations the code only plays one choce right? but in IE it seems to play 2 things at once, the rest of the browsers only sound out one track and that is what I want
I am trying to embed a video into a webpage using lightbox. From a design perspective, how should I place the video on the page.
I mean the videos are lined up across the page as thumbnails. Should I take a frame from the video and display that as an image that the user clicks? Or does the various video plugins take care of creating the thumbnail for you?
If you're using HTML5, the thumbnail of a video is defined using the 'poster' attribute in the video tag. Here's an example:
<video width="500" height="375" poster="myThumbnail.jpg" preload="none" controls="controls">
<source src="http://hostname.com/myVideo.webm"/>
</video>
If you want to create this image automatically using a given frame of the video, you should check the link posted by F. Calderan