I am hoping someone can help me out with my problem
im struggling to find a code to enable the autoplay video and audio at the same time in google chrome?
also this putting silence.mp3 is not working anymore on chrome.
<iframe src="./images/silence.mp3" allow="autoplay" id="audio" style="display:none" id="iframeAudio"></iframe><iframe src="./images/silence.mp3" allow="autoplay" id="audio" style="display:none" id="iframeAudio"></iframe>
<audio autoplay loop id="video_bg_plays" class="myaudio">
<source src="./images/Wizard101_audio.mp3?autoplay=1&loop=1&muted=0" type="audio/mp3" >
</audio>
<div id="video_bg">
<div style="background:url('./images/bg2.png') no-repeat top center;z-index:-3;position:absolute;width:100%;min-width:310px;height:100%" class="js-bg-video"></div>
<video autoplay muted loop id="video_bg_play" class="hide viewer">
<source src="./images/Wizard101.mp4?autoplay=1&loop=1&muted=0" type="video/mp4">
</video>
<div class="player__controls">
<!--<div class="progress">
<div class="progress__filled"></div>
</div>-->
<button class="player__button toggle" title="Toggle Play">►</button>
<!--<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
<button data-skip="-10" class="player__button">« 10s</button>
<button data-skip="25" class="player__button">25s »</button>
</div>-->
</div>
</div>
The only workaround I have found recently was below:
navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
var vid = document.getElementById("video_bg_plays");
vid.play(); // play your media here then stop the stream when done below...
stream.getTracks().forEach(function (track) { track.stop(); });
});
It will ask users for their Microphone permission and they have to click Allow once then you are permitted to play anything with sound. It works because as long as you are capturing then you are allowed to autoplay sound, without any user gesture needed.
Related
I am building a custom controls HTML5 video player. You can see it HERE.
The problem I ran into is being unable to display the video's duration before playing it.
The HTML:
<div class="video-container">
<video poster="img/flamenco.jpg">
<source src="flamenco.mp4" type="video/mp4" />
<source src="flamenco.ogg" type="video/ogg" />
</video>
<div class="controls-wrapper">
<div class="progress-bar">
<div class="progress"></div>
</div>
<ul class="video-controls">
<li><input type="button" name="play-pause" value="Play" class="play"></li>
<li><input type="button" name="prev" value="Previous video" class="previous"></li>
<li><input type="button" name="next" value="Next video" class="next"></li>
<li class="mute-toggle unmuted"><input type="checkbox" name="mute" value="Mute"></li>
<li class="volume-container"><input class="volume-slider" type="range" value="1" max="1" step="0.01"></li>
<li class="show-time disable-select"><span class="current-time">00:00</span><span>/</span><span class="duration"></span></li>
<li class="fullscreen-container"><input type="button" name="toggle-fullscreen" value="Fullscreen" class="fullscreen"></li>
</ul>
</div>
</div>
The JavaScript:
var currentTimeDuration = function(){
var currTimeStr = Math.round(video.currentTime).toString();
var durationStr = Math.round(video.duration).toString();
$('.current-time').text(currTimeStr.timeFormat());
$('.duration').text(durationStr.timeFormat());
}
$(video).on('timeupdate', function(){
currentTimeDuration();
});
The problem with the function above is that it only displays the current time and duration of the video after it has started. I wish it would show something like 00:00 / 02:22 on page load.
Any hints? Thank you!
video.duration is correct after 'loadedmetadata' event. Try to add metadata loaded handler:
$(video).on('loadedmetadata', function(){
currentTimeDuration();
});
So I am helping my gf with her Uni project. She is a graphic designer and she needed some help with creating a webpage with a video comics.
I made it so that the videos would play on hover with Javascript (this is the first time ever I had to use JS) and now I need a way to bind some of them together - e.g. you hover on one or the other and both play, you remove the mouse and both stop. And I need to do it several times. The website will contain a total of 24 Videos.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.video').each(function() {
$(this).on("mouseover", function(e) { hoverVideo(e); });
$(this).on("mouseout", function(e) { hideVideo(e); });
});
});
function hoverVideo(i) {
i.target.play();
}
function hideVideo(i) {
i.target.pause();
}
</script>
</head>
<body>
<div class="main">
<h3>Title</h3>
<p>
*Hover over each frame to see the story.
</p>
</div>
<div class="main">
<div class="firstrow">
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="Resources/1.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="Resources/2.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<img src="Resources/text/tap.svg" />
</div>
</div>
</div>
</body>
I would go with mouse enter and leave events to avoid redudancy of triggering the execution everytime your mouse is inside the video with movements
$(".thevideo").mouseenter(function(){
console.log("mouse is entered");
$(".thevideo").each(function(){
this.play();
})
})
$(".thevideo").mouseleave(function(){
$(".thevideo").each(function(){
this.pause()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.video').each(function() {
$(this).on("mouseover", function(e) { hoverVideo(e); });
$(this).on("mouseout", function(e) { hideVideo(e); });
});
});
function hoverVideo(i) {
i.target.play();
}
function hideVideo(i) {
i.target.pause();
}
</script>
</head>
<body>
<div class="main">
<h3>Title</h3>
<p>
*Hover over each frame to see the story.
</p>
</div>
<div class="main">
<div class="firstrow">
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<img src="Resources/text/tap.svg" />
</div>
</div>
</div>
</body>
At the moment you are only calling the function on 1 video - the video that triggered the event i.target.play();
So you just need to toggle pause and play on all videos inside .firstrow instead:
$(".firstrow .video").on("mouseenter", ()=>{
$(".firstrow video").each((index, video)=>{
video.play();
});
});
$(".firstrow .video").on("mouseleave", ()=>{
$(".firstrow video").each((index, video)=>{
video.pause();
});
});
I can currently play and pause a video by clicking anywhere in the <video> tag.But unfortunately, when i have added a second video the function works only for the first video only.
var video = document.getElementById('vid');
video.addEventListener('click', function() {
this.paused?this.play():this.pause();
},
false);
video.addEventListener("pause", function() {
document.getElementById("paused").style.display = "";
});
video.addEventListener("play", function() {
document.getElementById("paused").style.display = "none";
});
<div id="main">
<div id="computer" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
Any issue with the js code. Kindly advice.
it will not work lake that because ,the interpreter will consider just the last id with the same element ,if you use just two videos then you can just add other video id and paused id
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused2" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid2">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
try to use classes instud of ids
for more detaill take a lok to this page
http://flash.flowplayer.org/demos/installation/multiple-players.html
Hi all first of all thanks for the time to read my question and your help
I'm having the next issue with a customizing video controls in html5
In the next link i insert the video tag directly on the body and custom the video controls with the main.js
http://pechacabeza.com/labs/Webo/video/
<body onload="init()">
<div id="container" onclick="screenad.click();"></div>
<video id='media-video' controls poster="video_poster.jpg" autoplay muted class="adrime_video">
<source src='video.mp4' type='video/mp4'>
<source src='video.webm' type='video/webm'>
</video>
<div id='media-controls'>
<progress id='progress-bar' min='0' max='100' value='0'></progress>
<button id='replay-button' class='replay' title='replay' onclick='replayMedia();'></button>
<button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'></button>
<button id='mute-button' class='mute' title='mute' onclick='toggleMute("false");'></button>
</div>
</body>
The point is that i want to insert the video within a function initialiseMediaPlayer which is inside the main.js but then the custom video controls doesn't work :S as you can see in the next link:
http://pechacabeza.com/labs/Webo/video_Dynamic/
<body onload="init()">
<div id="container" onclick="screenad.click();"></div>
<div id='media-controls'>
<progress id='progress-bar' min='0' max='100' value='0'></progress>
<button id='replay-button' class='replay' title='replay' onclick='replayMedia();'></button>
<button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'></button>
<button id='mute-button' class='mute' title='mute' onclick='toggleMute("false");'></button>
</div>
<div id="media-video"></div>
</body>
Any idea what it could be wrong?
Thanks in advance
The code below works but it plays ALL instances of the projekktor video player in the DOM simultaneously. How would I revise the code to only play the video within the same parent div as the .startb i click?
html
<div class="videoContainer">
<div class="playerHolder">
<div class="videoPlayer"><video class="projekktor" poster="poster.jpg" title="" width="640" height="385" controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
</video></div>
<div class="startb"><img src="dbs/images/start.png"/></div>
<div class="postImage"><img src="006_CCC_Magdelena_poster.jpg" title="" width="640" height="385" /></div>
</div>
</div>
js
$('.startb').click(function() {
projekktor('*').each(function() {
this.setPlay();
});
});
Try this:
$('.startb').click(function() {
$(this).parent('div').find('.projekktor').setPlay();
});