On HTML page the video is put, I want to make such kind of task that shows seen videos blur and if we refresh page it will get normal without any overlay i wan to put css or java script for that.
Using JS, add a class to the video once its been watched:
.video--watched {
-webkit-filter: blur(20px);
filter: blur(20px);
}
I am assuming we are talking about a <video> tag.
It depends on what you mean be seen once. Do you mean if the video has ended or if the video has started playing.
JavaScript has methods for detecting whether the video has started or ended.
Here is an example. Let's say you have a list of videos
<video id="my-video">
<source src="movie1.mp4" type="video/mp4">
</video>
<video id="video2">
<source src="movie1.mp4" type="video/mp4">
</video>
var videos = document.getElementsByTagName("video");
for (var i = 0; i < videos.length; i++) {
videos[i].onended = function() {
video.style.opacity = 0.5;
});
}
Alternatively you can add inline event-attributes like so
<video id="my-video" onended="blurVideo()">
Related
I have a short, ~2-second video that plays on a loop in the background of a website I'm making, which, when it appears through transparent portions of divs, gives the effect of a metallic shimmer. It looks great. The problem is, when an iOS device is in low power mode, the video not only doesn't play (which is acceptable, I get it), it shows a big honkin' play button that shows through those same transparent portions of divs. I need to get rid of that, but every solution I've found seems to not work in iOS 14.
Here's the video tag:
<video id="videoElement" src="copper.mp4" autoplay loop playsinline muted webkit-playsinline></video>
…and the CSS:
video#videoElement::-webkit-media-controls,
video#videoElement::-webkit-media-controls-start-playback-button,
video#videoElement::-webkit-media-controls-play-button,
video#videoElement::-webkit-media-controls-panel,
video#videoElement::-webkit-media-controls-container,
video#videoElement::-webkit-media-controls-overlay-play-button,
video#videoElement::-webkit-media-controls-enclosure {
display: none !important;
-webkit-appearance: none;
opacity: 0 !important;
}
You can do this with JQuery. Include it with this:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
The following code will play the video as soon as the user interacts with their device in any way. This also acts as a workaround for regular safari autoplay issues.
<script type="text/javascript">
$('body').on('click touchstart', function () {
const videoElement = document.getElementById('videoElement');
if (!videoElement.playing) {
videoElement.play();
}
});
</script>
You can't trigger video playback without the user interacting with device (this is probably a good thing).
If you'd like to instead completely disable playback when low power mode is enabled (and some of us will thank you greatly), you can do the following:
<script type="text/javascript">
var promise = $('#videoElement').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay was successful
}).catch(error => {
$('#videoElement').remove()
});
}
</script>
I'll dig some more to see if there's a way to do this with pure CSS, but I doubt it'll be anywhere near as "stable".
All the image slider plugins I have used so far for Wordpress sites have had no way, as far as I could tell, to swap out different sized images at various screen sizes to enable an 'mobile first' experience.
For example: http://www.akqa.com/
They have changed which image is displayed depending on certain breakpoints and it allows control over which part of the image is displayed.
If there is no plugin to automate this, could it at least be achieved through CSS alone?
Thank you
You can do this by HTML picture tag or Jquery .data()
Jquery Example
orignalImg = $(".test").attr("src"); // get orignal image
mobileImg = $(".test").data("mobile"); // get mobile image
brakpoint = 768; //what ever your brakpoint
//do magic
function changeImg() {
$(".test").each(function() {
if ($(window).width() <= brakpoint) {
$(this).attr("src", mobileImg);
}else {
$(this).attr("src", orignalImg);
}
});
}
// call magic
changeImg();
//change image if viewport change
$(window).on('resize', function() {
changeImg()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Resize your window </h1>
<img class="test" src="http://placehold.it/600x300" data-mobile="http://placehold.it/300x600">
HTML Example
<picture>
<source srcset="http://placehold.it/600x300" media="(min-width:768px)">
<img src="http://placehold.it/300x600" alt="img">
</picture>
In your example link they are also using this <picture> tag. This is a simple solution but might be you will face browser compatibility issue
The same page ( www.goo.gl/xLAhN ) has a youtube video embedded in size 640x390 in an iframe using the following code: (3 variations of youtube embed code were tried all with same results)
`<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GxTl1Ykbuww?enablejsapi=1&origin=origin-domain.com" frameborder="0"></iframe>`
The same page has one Adsense banner embedded in 250x250 in an iframe using the following code:
`<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxx";
/* test */
google_ad_slot = "xxxxxxx";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>`
100% of the time the youtube video displays at 250x250. Looking at the view source, the Youtube iframe now has a style element attached to it with 250x250 directive.
`<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GxTl1Ykbuww?enablejsapi=1&origin=origin-domain.com" frameborder="0" style="width: 250px; height: 250px;"></iframe>`
If the adsense code is removed , youtube video loads in correct size.
Please help, after 5 days I think this is either CORS related, but there is nothing online about this problem. Somehow adsense is allowed to overcome cross domain restrictions and inject the youtube iframe with the size of its own.
The problem had to do with jquery that was part of the theme that beautified iframes
var win = jQuery(window),
iframes = jQuery('iframe:not(.slideshow iframe):not( iframe.no_resize)',container),
adjust_iframes = function() {
iframes.each(function() {
var iframe = jQuery(this),frame_parent_w = iframe.parent().width(),proportions = 16/9;
if(this.width && this.height) {
proportions = Math.round(this.width / this.height * 1000) / 1000;
iframes.css({
width:frame_parent_w,height: frame_parent_w / proportions});
}
});
};
adjust_iframes();
win.smartresize(adjust_iframes);
After I added :not(inside iframe) to the second line (since Adsense always has their iframe wrapped in inside tags, everything rendered as expected with the above code ignoring the Adsense iframe settings.
I've got a small problem - I have a HTML5 video om my site, it works fine in FF, Chrome, Safari. However, it only shows the video in IE if I set autoplay="autoplay". Somehow it doesn't show the poster img - You can see it here, http://test.jsworldmedia.com/ Just press See Video. Anyone know what is wrong?
The code is:
<video id="videoContainer" width="932" height="524" controls="controls" poster="/media/13037/big_buck_bunny_poster.jpg">
<source src="http://test.jsworldmedia.com/media/13010/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://test.jsworldmedia.com/media/13555/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://test.jsworldmedia.com/media/13034/big_buck_bunny.webm" type="video/webm" />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="932" height="524" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value="config={'playlist':['http://test.jsworldmedia.com/media/13037/big_buck_bunny_poster.jpg', {'url': 'http://test.jsworldmedia.com/media/13010/big_buck_bunny.mp4','autoPlay':false,'autoBuffering':true}]}" />
<img src="http://test.jsworldmedia.com/media/13037/big_buck_bunny_poster.jpg" width="932" height="542" alt="" title="No video playback capabilities." />
</object>
</video>
IE9 overwrites the poster image if some of the video is loaded, which is the default. If you add the attribute preload="none" the poster image will work in IE9.
Not ideal.
edit
I've written about this and have also filed a bug report with the W3C as I think that it needs to be changed.
I have found the poster attribute to be too inconsistent. For me, preload="none" only fixed the IE 9 problem.
You are better off editing your video so that the poster image is the first frame of your video.
I am a big fan of this Video for Everybody site which outlines exactly how one should implement the html5 <video> tag with fallbacks. The author talks specifically about the poster attribute, mentioning inconsistent support and a major bug in iOS 3.x as reasons to encode the poster image into the first frame of your video.
You can also check out VideoJs which will handle many of the cross browser issues.
EDIT (2012-11-04): VideoJs may not be a good option, major issues reported with IE 9.
I had the same issue. I did the following to have the poster working in IE8 and IE9.
In html file add an image bellow the video element with the poster as src:
<img id="video-poster" width="460px" height="260px" src="img/video_poster.jpg">
In css file add:
#video-poster {position: absolute; z-index: 600; display: none;}`
Note that the parent need to have in css position: relative
In JS file add:
/**
* fix the following issue: "video preview not showing properly on IE8 and IE9"
*/
(function ($) {
var browserIEInfo = navigator.userAgent.match(/MSIE (([0-9]+)(\.[0-9]+)?)/);
if (browserIEInfo === null || parseInt(browserIEInfo[2]) > 9){
return;
}
if (parseInt(browserIEInfo[2]) < 9 && !isFlashSupported()) {
return;
}
var video = $('video'); // use element id if there is more than 1 video
var videoPoster = $('#video-poster');
$( window ).resize(function() {
fixVideoCoverPosition();
});
fixVideoCoverPosition();
videoPoster.show();
videoPoster.click(function() {
video.get(0).play()
});
video.on('playing', function() {
videoPoster.hide();
});
video.on('ended', function() {
videoPoster.show();
});
function isFlashSupported() {
var hasFlash = false;
try {
new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
} catch (e) {
var mimeTypes = navigator.mimeTypes;
if (mimeTypes
&& mimeTypes['application/x-shockwave-flash'] !== undefined
&& mimeTypes['application/x-shockwave-flash']['enabledPlugin']
) {
hasFlash = true;
}
}
return hasFlash;
}
function fixVideoCoverPosition() {
var videoPosition = video.position();
video.width();
$('#video-poster').css({
top: videoPosition.top,
left: videoPosition.left,
width: video.width(),
height: video.height()
});
}
}(jQuery));
I'm trying to embed an HD YouTube video but no matter what I try, it only ever seems to load the 480p version.
According to YouTube, embedding an HD video is as simple as adding hd=1 to the URL:
<iframe src="//www.youtube.com/embed/{videoId}?hd=1" width="960" height="720" frameborder="0" allowfullscreen></iframe>
This, however, does not seem to be working, at least in my implementation of the iframe:
<iframe id="video-player" width="960" height="720" src="//www.youtube.com/embed/{videoId}?enablejsapi=1&autoplay=1&rel=0&modestbranding=1&showinfo=0&showsearch=0" frameborder="0" allowfullscreen></iframe>
The same is true with the Javascript API:
HTML:
<div id="video-player"></div>
JS:
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video-player', {
height: '720',
width: '960',
videoId: '{videoId}',
playerVars: {
'controls': 1,
'autoplay': 1,
'hd': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
player.playVideo();
}
Use this parameter:
vq=hd1080
Example:
<iframe src="https://www.youtube-nocookie.com/embed/SzTdgE04uA8?vq=hd1080" width="853" height="480"></iframe>
As per this answer on the YouTube support forum:
[The iframe embed] will attempt to "optimize" the experience and will work off
of the dimensions of the embed player to choose what quality to play
it back at by default.
If the embed is much smaller than 1280x750, such as 853x510 or 640x390, it will play 480p or 360p, regardless of whether the &hd=1 parameter is set.
(Emphasis mine)
I changed the dimensions of the iframe to 1280x720 and the video loaded at 720p resolution.
So, basically the iframe embed mechanism is intelligent and only loads the closest resolution according to the size of the iframe.
There is a trick you can do. Set the quality via JS. Its not guaranteed, but works on my site (ggreplayz.com):
https://developers.google.com/youtube/js_api_reference#Playback_quality
Example:
<iframe id="vid2" style="z-index: 1;" width="853" height="505" src="http://www.youtube.com/embed/<?php echo $vid2Array[0];?>?enablejsapi=1&wmode=transparent&hd=1" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript">
...
function onYouTubePlayerAPIReady() {
player1 = new YT.Player('vid1', {
events: {
'onReady': onPlayerReady1
}
});
...
function onPlayerReady1(event) {
player1.setPlaybackQuality('hd720');
}
...
hd parameter has been deprecated: https://developers.google.com/youtube/player_parameters#Deprecated_Parameters
I use &hd=1&vq=hd720 for achieve that. It loads the 720p version even if the player is smaller. I got this information from this source.
I might be a little late, but I just discovered it only looks at the height of the video player.
When I try to embed a video 1000px wide, but only 408 pixels high (2.35:1 matte) it selects 360p >:|
After spending more than 5hrs searching and testing all the answers, the below code works for me.
Using Xcode 5, iOS 7.0.4 and iPad mini2.
- (void)viewWillAppear:(BOOL)animated
{
NSString *htmlString = #"<html><head>\
<meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = yes, height = 640px, width = 360px\"/></head>\
<body style=\"background:#000;margin-top:0px;margin-left:0px\">\
<iframe id=\"ytplayer\" type=\"text/html\" width=\"640px\" height=\"360px\"\
src=\"http://www.youtube.com/embed/%#?vq=hd1080\"\
frameborder=\"0\"/>\
</body></html>";
htmlString = [NSString stringWithFormat:htmlString,self.videoId, self.videoId];
[self.videoPlayerView loadHTMLString:htmlString baseURL:[NSURL URLWithString:#"http://www.youtube.com"]];
}
The only important thing here is the aspect ratio that you set in your iframe (" width=\"640px\" height=\"360px\"), which are basically the ratios of 1280*720. And then set the same size for your UIWebView.
Hope this help someone.
Mine wasn't working at all. I tried everything including all these parameters
&hd=1&vq=hd720&quality=high
But it didn't work until I added this parameter:
&version=3