http://www.biznabler.com/
Main page of website is video auto play. I am want to stop auto-play video.
I am trying below mention method, but not success.
document.getElementsByTagName("video")[0].removeAttribute("loop");
var x = document.getElementById("bgvid");
x.setAttribute('autostart','false');
x.setAttribute('preload','none');
x.setAttribute('autoPlay','false');
x.pause();
This is WordPress website, and I am able to insert own modified code. But do not find any method to stop video auto play.
Please help me
In the code of your website, just after the <script> tag with the code you mention in your question you have another script that autostarts the video:
<script type="text/javascript" id="sns_scripts">
var video = document.getElementById("bgvid");
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 1);
});
</script>
Just get rid of that script(or comment our the .play() and you're done.
Related
I have this video as a background with Bootstrap that I would like to autoplay on page load. It works fine with desktop Chrome, but not so much for mobile.
It is a small, .mp4 file that is created using:
<video class="video-fluid" id="video1" autoplay loop>
<source src="videos/light-swaying.mp4" type="video/mp4" />
</video>
The only thing that shows up on mobile is just a still of the first frame, not a moving video. I added this script at the bottom of my body, and it actually starts the video fine. It loops and everything:
<script type="text/javascript">
var video = document.getElementById('video1');
var aboveView = document.getElementById('video-carousel-example2');
aboveView.addEventListener('click', function () {
video.autoplay = true;
video.play();
}, false);
</script>
The only problem is, though, I have to click on the video to actually start it. I tried this script in the same spot, and no luck whatsoever:
<script type="text/javascript">
var video1 = document.getElementById('video1');
video1.autoplay = true;
video1.play();
</script>
So does anyone have any idea how to fix this and make it play automatically?
Which version of Chrome? Because:
"Autoplay was disabled in previous versions of Chrome on Android because it can be disruptive, data-hungry and many users don't like it."
Source:
https://developers.google.com/web/updates/2016/07/autoplay
Mostly we too find this issues in ipad and tablets because ipad and tablet doesnt support the autoplay
To see a full list of these restrictions, see the official docs: https://webkit.org/blog/6784/new-video-policies-for-ios/
for that you need to trigger your click function by checking your monitor resolution i am not familiar with javascript so i am written this using jquery
$(document).ready(function(){
var screenWidth = $( window ).width();
if(screenWidth <= 1024)//just i am checking for ipad only
{
$('#video-carousel-example2).trigger('click');
}
$('#video-carousel-example2).click(function(){
var video1 = document.getElementById('video1');
video1.play();
})
});
I am playing an audiobook chapter with the text and want it to automatically redirect to a new page with the next chapter text and audio when the html5 audio file finishes.
I am not a programmer so I could use some help.
I know I need to use the addEventListener with the ended function similiar to what is below but I do not know how to modify this to call a new page instead of a new audio file.
<audio id="audio" autoplay controls src="song1.mp3" type="audio/mpeg"></audio>
<script type="text/javascript">
document.getElementById('audio').addEventListener("ended",function() {
this.src = "song2.mp3?nocache="+new Date().getTime();
this.play();
});
</script>
Use the ended event and redirect:
http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#event-media-ended
function redirectHandler() {
window.location = 'http://example.com';
}
audio.addEventListener('ended', redirectHandler, false);
Demo: http://jsfiddle.net/tqam3zyf/2/
When you use
this.src = "song2.mp3?nocache="+new Date().getTime();
this.play();
you set the current source of the audio element.
If you want to load a new page instead of your current page you can use :
window.location = "your_url";
Site plays a full screen video with sound. The site was designed to play the video without sound. When a link is clicked the other portions of the site appear on top of the video.
Unfortunately the client has insisted on having sound, so when something is clicked you still hear the music until the video ends. I know it is possible to have the video stop or even have it muted when a link is clicked but I cannot seem to understand where exactly to implement this. Your help is appreciated. I'm not a jquery person so I'm rather dim on this. Site uses the YTPlayer ( http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/ )
The site: http://www.bradfordweb.com/clients/concannon2/
The code in the page that is playing the video is:
<a id="P2" class="player" data-property="{videoURL:'http://youtu.be/OgAr2jQr3rg',containment:'#home',autoPlay:true, mute:false, loop:false, opacity:.6}"></a>
The link is:
<div class="link-home"><div class="cl-effect-8"><span>ABOUT US</span> </div></div>
I tried:
onclick="stop()"
and
stopYTP
I found the function in the jquery.mb.YTPlayer.js file:
stopYTP: function () {
var YTPlayer = this.get(0);
var controls = jQuery("#controlBar_" + YTPlayer.id);
var playBtn = controls.find(".mb_YTVPPlaypause");
playBtn.html(jQuery.mbYTPlayer.controls.play);
YTPlayer.player.stopVideo();
},
Help?
I've had this issue as well and found it in the onYouTubePlayerReady function.
Look for it in that file and do the following changes:
function onYouTubePlayerReady(playerId) {
var player=$("#"+playerId);
player.mb_setMovie();
// Remove or comment out the lines below.
// $(document).on("mousedown",function(e){
// if(e.target.tagName.toLowerCase() == "a")
// player.pauseYTP();
// });
}
That line just simply binds the mousedown event on an a tag and consequently pauses the player.
Hope that helps.
I want to show video poster after play. I am trying following code but no luck.
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
this.posterImage.show();
});
A more straightforward way of doing this:
<script type="text/javascript">
var video= $('#cms_video').get(0);
video.addEventListener('ended',function(){
video.load();
},false);
</script>
Which is a shortcut to loganphp answer. Indeed when changing the src of a video tag you implicitly call a load() on it.
This method has the caveat to request the media URL again and depending on caching settings it may re-download the full-length media resource causing unnecessary network/CPU usage for the client. But still it does answer the question the way loganphp asked it.
If you want to bypass this caveat you can use and overlay image/div and bind a click/touchstart event on it to show the video tag and hide the overlay. When the ended event has fired just hide the video tag and show the overlay image.
Finally I achieved my goal with following code
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
v=video.currentSrc;
video.src='';
video.src=v;
});
Simply at the end of video, show a div with the same src of the poster (with upper z-index or hide the video)
If you need to replay the video, bind a click event on the showed div (to switch visibility and replay)
**video start autoplay and Poster showing at end of video **
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<body>
<script type="text/javascript">
document.observe('dom:loaded', function(evt){
$$('video').each(function(elm){
elm.play();
var wrapper = elm.wrap('span');
var vid = elm.clone(true);
elm.observe('ended', function(){
wrapper.update(vid);
});
});
});
</script>
<video id="myvideo" poster="1.png" >
<source src="1.mp4" type="video/mp4" />
</video>
TRY THIS
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
v=video.currentSrc;
video.src='';
video.src=v;
$('#cms_video')[0].autoplay=false
$('#cms_video')[0].load()
});
Try to give your poster an id or class then you can do:
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
$('#poster').show();
// ^ Use . here if you apply class instead of if for your poster
});
I have implemented a Background Video on a page using BigVideo which is based off Video.js
When an div is clicked, the video plays in the background. I cannot for the life of me figure out how to redirect to another URL when the video is done playing. This is the code I am using:
Link to play the Video:
Code to redirect when ended:
<script type="text/javascript">
_V_("home_g").ready(function(){
this.addEvent("ended", function(){
{window.location = "www.google.com"}
});
});
Any help would be greatly appreciated. Here is the full test site: Test Site
After Trying for a few days to get this to work correctly, I've resorted to making a redirect based on the time of the video if anyone else has the same problem. If anyone has the answer to make it work correctly great, if not anyone else could simply do this like I did:
<script type="text/JavaScript">
redirectTime = "107000";
redirectURL = "index.htm";
function timedRedirect() {
setTimeout("location.href = redirectURL;",redirectTime);
}
</script>
try this:
var BV = new $.BigVideo();
BV.init();
BV.getPlayer().on("ended", function () {
// your code after video has finished playing
});