I've tried everything but the video doesn't start in Mozilla Firefox (running ot mac) neither do the controls work. But it works perfectly in every other browser and OS.
Please, help me! :(
I wrote this:
<button id="play-pause-button" class="pp_button "></button>
<button id="mute-button" class="m_button "></button>
<script>
$('#play-pause-button').click(function () {
if ($("video").get(0).paused) {
$("video").get(0).play();
} else {
$("video").get(0).pause();
}
});
$('#mute-button').click(function () {
$("video").prop('muted', true);
if( $("video").prop('muted', true) )
{
$("video").prop('muted', false)
}
$("#mute-button").click( function (){
$("video").prop('muted', !$("video").prop('muted'));
});
});
$(document).ready(function(){
$("video").prop('muted', true);
$("video").click( function (){
if( $("video").prop('muted', true) )
{
$("video").prop('muted', false)
}
$("video").click( function (){
$(this).prop('muted', !$(this).prop('muted'));
});
});
});
</script>
<script>
</script>
<div id="container1">
<video autoplay loop muted>
<source src="//player.vimeo.com/external/109280665.hd.mp4?s=f907d6edd960998ede2030e9c03fc641" type="video/mp4">
<source src="//player.vimeo.com/external/109280665.hd.mp4?s=f907d6edd960998ede2030e9c03fc641" type="video/webm">
</video>
<div class="content1">
</div>
</div>
</div>
Related
Video which for some reason doesn't play most of the time on Desktop.
<video autoplay loop id="video-background" class="video-bg" poster="assets/images/home-vid.jpg">
<source src="/assets/videos/home.mp4" type="video/mp4">
</video>
Video shoudl autoplay in loop when page is opened..
I tried on FF, Chrome it play once as Private browsing then it stopped playing again..
$(document).ready(function () {
$('#fullpage').fullpage({
verticalCentered: true,
//sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
afterRender: function () {
//playing the video
$('video').get(0).play();
}
});
});
You have to add playsinline autoplay muted loop, Chrome dont allow a video to autostart if it'ss not muted
You can try this:
<video src="{{ asset('/assets/videos/home.mp4' )}}" muted autoplay loop playsinline></video>
And put this js after that:
window.addEventListener('load', async () => {
let video = document.querySelector('video[muted][autoplay]');
try {
await video.play();
} catch (err) {
video.controls = true;
}
});
I have a video with autoplay on my website http://vakuutustiedot.fi/arkhaltia/ and it works perfectly on Mozilla but not working in Chrome. The video stopped instantly when the page was loaded and it never played until you refresh the page(at least 2 times).
<div class="homepage-hero-module">
<div class="video-container">
<video id="vid" autoplay loop class="fillWidth">
<source src="video/video1.mp4" type="video/mp4" />
<source src="video/video1.webm" type="video/webm" />
</video>
<div class="poster hidden">
<img src="images/smoke.jpg" alt="">
</div>
<script>
$('#vid')[0].play()
</script>
</div>
</div>
JS:
$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
// console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
Actually I have noticed that if go through link it works immediately but if you refresh it's not working again. Who knows what's the problem?
It may be that you need to add the 'muted' attribute to allow it autoplay - see this example:
The snippet below plays in chrome, for example, if you want a reference:
<video autoplay muted poster="path to video" id="bgvid">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
I want to autoplay an HTML5 video after opening it on fancybox3.
here's my codepen:
https://codepen.io/ableslayer/pen/aygGQX
and my code:
$(document).ready(function() {
$("[data-fancybox]").fancybox({
afterShow: function() {
// After the show-slide-animation has ended - play the vide in the current slide
this.content.find('video').trigger('play')
// Attach the ended callback to trigger the fancybox.next() once the video has ended.
this.content.find('video').on('ended', function() {
$.fancybox.next();
});
}
});
});
Give your video a id (myVideo) and add this line in afterShow function
var vid = document.getElementById("myVideo");
vid.play();
Javascript
$(document).ready(function() {
$("[data-fancybox]").fancybox({
afterShow: function() {
// After the show-slide-animation has ended - play the vide in the current slide
var vid = document.getElementById("myVideo");
vid.play();
// Attach the ended callback to trigger the fancybox.next() once the video has ended.
this.content.find('video').on('ended', function() {
$.fancybox.next();
});
}
});
});
HTML
<a data-fancybox data-src="#one" class="fancybox">link</a>
<div id="one" style="display:none">
<video id='myVideo' width="400" controls autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
I wish to host some HTML5 videos in a HTML app. On opening the video they currently just open up within a page and play by default with the controls available with the option to open fullscreen, is there any way to get playing full screen as soon as you open the page?
<div class="video-container" data-tap-disable="true">
<div class="videotitle">{{product.title}}</div>
<div class="videoduration">Duration: {{product.duration}}</div>
<video id="myVideo" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer"><source src="{{product.video}}" type="video/mp4"/></video>
Here is my Angular controller, I assume the JS code will fit in here somewhere as opposed to my product.html
.controller('ProductCtrl', function (Products, $rootScope, $scope, $stateParams, $state, $timeout) {
$scope.product = Products[$stateParams.productId];
var video = document.getElementById("myVideo");
// Stop video playing when we go to another page
$rootScope.$on('$stateChangeStart', function () {
stopVideo();
});
// Go to list of other videos when individual HTML5 video has finished playing
angular.element(video).bind('ended', function () {
$state.go('app.products');
});
function stopVideo() {
video.pause();
video.currentTime = 0;
}
});
const elem = document.getElementById("myVideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
var video = $("#myVideo");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});
Whenever i try press the buttons they only work for 1 of the videos instead of each set being used for the intended video. Any help will be appreciated. And by the way i'm usign google chrome.Thanks:)
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br>
<video id="myVideo1" width="420">
<source src="r8_ext.mp4" type="video/mp4">
</video>
</div>
<script>
var myVideo = document.getElementById("myVideo1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br>
<video id="myVideo2" width="420">
<source src="r8_int.mp4" type="video/mp4">
</video>
</div>
<script>
var myVideo = document.getElementById("myVideo2");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
Thanks:)
You're using the same variable and functions for both videos. Use a unique variable for each video and let the functions take the video as an argument instead of duplicating them.
var myVideo1 = document.getElementById("myVideo1");
var myVideo2 = document.getElementById("myVideo1");
...
function playPause(video) {
if (video.paused)
video.play();
else
video.pause();
}
...
<button onclick="playPause(myVideo1)">Play/Pause</button>
...
<button onclick="playPause(myVideo2)">Play/Pause</button>
You are using the same variable name in both scripts, 'myVideo'. They need to be unique. Also, you have duplicate functions. You should refactor them to avoid duplication.