The problem is that, when I close the popup without pausing the video, the audio keeps playing. I cannot pause the video while closing the popup. The complete code is give below.
//html code
<style>
.yourModalClass {
padding: 0 1.5em 1em;
border-radius: 5px;
max-width: 380px;
color:#fff;
}
.yourModalClass a {
color:#fff;
}
</style>
abc
<div id="yourModalId" class="yourModalClass" style="display:none; margin-left: -20%; margin-right: 20%">
<h2>abc</h2>
<video width="600" height="400" controls="">
<source src="abc.mp4" type="video/mp4"/>
Your browser does not support HTML5 video.
</video>
</div>
<script>
$('#yourModalId').modality({
effect: 'slide-up'
});
</script>
//javascript
/* #author: Himanshu Kandpal (cse10324.sbit#gmail.com)*/
;(function(e,t,n,r){var i="modality",s=e("body")[0],o= {autoBind:true,clickOffToClose:true,closeOnEscape:true,effect:"",innerClass:"mm-wrap",modalClass:"modality-modal",onClose:"",onOpen:"",openClass:"mm-show",openOnLoad:false,userClass:""},u=function(t,n){var r=this;r.defaults=o;r.id=e(t).attr("id");r.settings=e.extend({},o,n);r.$modal=e(t).wrap('<div class="'+r.settings.modalClass+" "+r.settings.effect+" "+r.settings.userClass+'">'+'<div class="'+r.settings.innerClass+'">'+"</div>"+"</div>").show();r.$wrapper=r.$modal.parents("."+r.settings.modalClass);r.$triggers=e('a[href="#'+r.id+'"], [data-modality="#'+r.id+'"]');if(r.settings.autoBind){r.$triggers.each(function(){r.setTrigger(e(this))})}if(r.settings.clickOffToClose){r.$wrapper.click(function(e){e.preventDefault();if(e.target==r.$wrapper[0])r.close()})}if(r.settings.closeOnEscape){e(s).keyup(function(e){if(e.keyCode==27)r.close()})}if(navigator.appVersion.indexOf("MSIE 7.")!=-1){r.$wrapper.prepend('<div class="mm-ghost"></div>')}if(r.settings.openOnLoad)r.open();return r};e.extend(u.prototype,{open:function(e){this.$wrapper.add(s).addClass(this.settings.openClass);if(typeof this.settings.onOpen=="function")this.settings.onOpen();if(typeof e=="function")e();return this},close:function(e){this.$wrapper.add(s).removeClass(this.settings.openClass);if(typeof this.settings.onClose=="function")this.settings.onClose();if(typeof e=="function")e();return this},toggle:function(e){return this.isOpen()?this.close(e):this.open(e)},isOpen:function(){return this.$wrapper.hasClass(this.settings.openClass)},setTrigger:function(e){var t=this;e.click(function(e){e.preventDefault();t.toggle()});return t}});e.extend(u,{instances:{},init:function(e,t){var n={},i=this,s=0;e.each(function(){var e=new i(this,t);i.instances[e.id]=n[s]=e});return n[1]===r?n[0]:n}});e[i]=u;e.fn[i]=function(t){return e[i].init(this,t)}})(jQuery,window,document);
add id to the video controler element
call after slide up
$('#videoID')[0].pause();
$("#videoID")[0] will return you the DOM element not the jQuery object as the pause method is not the jquery method its the DOM method
Related
In the below shared stackblitz example, i have bound mousedown and click event for the audio element wrapper which is not triggered. I need to perform my own action, with audio element click being performed.
Couldn't find any solutions for this case, any thoughts over this is appreciated.
<span id="test">
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<br>
</span>
<script>
document.querySelector('#test').addEventListener('click', function() { console.log ('click called')});
document.querySelector('#test').addEventListener('mousedown', function() { console.log ('mousedown called')});
Sample: https://stackblitz.com/edit/9gw8e5-qujbbj?file=index.html,index.js
Any suggestions on this, to achieve this behavior. Couldn't find any suggestions regarding this in the MDN too (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio).
Tried the below way of wrapping inside the figure HTML element, which is an alternate solution instead of wrapping a separate element above the audio element. Those who want to wrap the audio elements within a inline/block nodes.
```css
figure {
display: block;
outline: none;
position: relative;
margin: 0;
padding: 0;
}
figure:after {
position: absolute;
content: "";
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: default;
display: block;
background: transparent;
}
```html
<span id="test">
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</span>
Sample: https://stackblitz.com/edit/9gw8e5-dswrh3?file=index.html,index.js
Above sample makes the mousedown and click action work for the audio element.
Hope it helps someone..!
According to w3School, you can use the onplay attribute to read whenever the audio/video has been started or is no longer paused
<audio onplay="myFunction()">...</audio>
Instead, (I do not suggest to use this solution) if you would like to acces the mouse events, you can place an invisible div over the audio element:
<script>
function catchClick(){
alert("hi");
}
</script>
<div onclick="catchClick()" style="position:absolute;z-index:1;width:300px;height:30px;">
</div>
<audio controls>
<source src="/url/track.mp3" type="audio/mpeg">
</audio>
I have written a code for playing and pausing a video but when I run the code, it appears small on the screen. However, I want to increase the size of the video.
<!DOCTYPE html>
<html>
<body>
<div class="col-md-10 canvas"></div>
<center>
<button onclick="playVid()" type="button">
Play Video
</button>
<button onclick="pauseVid()" type="button">
Pause Video
</button>
<br>
<video id="myVideo" width="320" height="176">
<source src="./audios/lp_gateway.mp4" type="video/mp4">
<source src="./audios/lp_gateway.mp4" type="video/mp4">
</video>
</center>
<script>
var vid = document.getElementById("myVideo");
// for playing
function playVid() {
vid.play();
}
// for pausing
function pauseVid() {
vid.pause();
}
</script>
</body>
</html>
If you are referring to the size of the video container, you can increase it by:
Increasing the width and height values in:
<video id="myVideo" width="1280" height="720">
Removing the width and height from the tag and specifying it in the css:
#myVideo {
width: 1280px;
height: 720px;
}
If you are referring to the size of the video being played inside the container, you can do it via css, just do the step #2 above and add object-fit: cover; to it:
#myVideo {
width: 1280px;
height: 720px;
object-fit: cover;
}
In a single html page there are multiple video tags and all these videos may be played simultaneously. I have build an application where I am capturing video using webrtc and video capture device. These video are not seekable.
So I am calling below code for each of those video tag so that video which are playing can be seekable.
This code works fine if I apply to only one tag but when I apply it for multiple video tag it wont work.
$scope.addListenerVideo = function(videoSrc) {
var videoSrcVar = document.getElementById(videoSrc);
if(videoSrcVar !=null) {
videoSrcVar.addEventListener('loadedmetadata', () => {
if (videoSrcVar !=null && videoSrcVar.duration === Infinity) {
videoSrcVar.currentTime = 1e101;
videoSrcVar.ontimeupdate = function() {
videoSrcVar.currentTime = 0;
videoSrcVar.ontimeupdate = function() {
delete videoSrcVar.ontimeupdate;
};
};
}
});
}
}
html code sample:
<div class="row">
<div class="first-column">
<video width="636" height="380" controls preload="auto" ng-show="actStatus_1" id="demoVideoSrc1" style="border: 1px solid black; margin-top: 10px; margin-left: 10px; "></video>
</div>
<div class="second-column">
<video width="600" height="380" controls preload="auto" ng-show="actStatus_2" id="demoVideoSrc2" style="border: 1px solid black; margin-top: 10px; margin-left: 149px;"></video>
</div>
</div>
Here I switched to mozilla firefox. There is issue with the way video capture in chrome which is not allowing video to be seekable. I don't know whether I was missing something or not. Once I switched to Firefox browser there was no issue with seeking video.
I am using JANUS to stream the video.
I have 2 div tags, one which is bigger than the other and I'm keeping an option to swap the elements. These div tags contain the video tags.
I have 2 video tags, one in which local video is being streamed and another in which the remote video is being streamed.
The following is the function I've attempted.
var swappingVideoFunction = function() {
var localVideo = $("#videolocal").html();
var remoteVideo = $("#videoremote1").html();
console.log(localVideo);
$("#videolocal").html(remoteVideo);
$("#videoremote1").html(localVideo);
}
I can see that in the html on inspecting, The video tag is present in the desired div but the video goes completely blank. The complete div looks empty. Is this the case with video tags in general? Is there an approach to do it?
So my thinking is that the object your writing to could be updating the reference. This is why the JQuery clone() function comes handy to remove reference from the original object.
Check out the following code snippet.
var swappingVideoFunction = function() {
var localVideo = $("#videolocal").clone();
var remoteVideo = $("#videoremote1").clone();
$("#videolocal").html(remoteVideo.html());
$("#videoremote1").html(localVideo.html());
}
.green {
height: 50%;
background-color: green;
padding: 10px;
box-sizing: contain;
}
.red {
height: 50%;
background-color: red;
padding: 10px;
box-sizing: contain;
}
.swap-button {
float: right
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="swap-button" onClick="swappingVideoFunction()">Do Swap</button>
<div id="videolocal">
<video class="red" width="320" height="240" controls>
<source src="local.mp4" type="video/mp4">
<source src="local.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div id="videoremote1">
<video class="green" width="320" height="240" controls>
<source src="remote.mp4" type="video/mp4">
<source src="remote.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
I have a HTML5 video element on my webpage and I want to create a custom timeline control for the video. However, I am having problems when I seek right to the end of the video. When I try to seek backwards, the video does not change (the ticker still moves though). Calling the "play" method does nothing either. The only thing that does seem to work is the "currentTime" and "ended" properties, which are still updated correctly.
Here is the HTML layout of my video and ticker (the "blocks" table has a z-index of 1000 and sits below the ticker, so it does not interfere with it):
<div id="player">
<video width="500">
<source src="Tutorial 1.mp4" type="video/mp4">
</video>
<ul>
<li id="play_pause" title=""><img src="control.png"></img></li>
<li id="volume" title=""><img src="speaker_volume.png"></img></li>
<li id="split" title=""><img src="scissors_plus.png"></img></li>
<li id="merge" title=""><img src="film_minus.png"></img></li>
</ul>
<div id="timecode" class="modtime"><img src="mark_time.png"></img><div></div></div>
</div>
...
<div id="timeline">
<table id="blocks" width="100%" cellspacing="0" cellpadding="0" border="0" class="CRZ">
<tbody>
<tr>
<td style="width: 800px;"></td>
</tr>
</tbody>
</table>
<div id="ticker"></div>
</div>
And here's the CSS for the "ticker" and "timeline" elements:
#timeline {
float: left;
width: 850px;
height: 30px;
background: lightblue;
margin-left: 25px;
border: 1px solid black;
border-radius: 2px;
}
#ticker {
height: inherit;
width: 1px;
background: red;
z-index: 3000;
position: relative;
left: 0px;
cursor: col-resize;
opacity: 1;
}
I made the "ticker" element draggable using Jquery UI, creating an event handler to update the videos "currentTime" property during the drag. The "timecode" element displays the "currentTime" element in MM:SS.SS. This is still functional after seeking to the end.
$("#ticker").draggable({ containment: "parent", axis: "x", cursor: "col-resize", grid: [ 1, 1 ], drag: function( event, ui ) {
$("#stage2 video").prop("currentTime", ((ui.position.left - 1) * $("#stage2 video").prop("duration")) / ($("#timeline").width() - 2));
$("#timecode div").text(sec2smpte($("#stage2 video").prop("currentTime")));
}});
I also scripted the ticker to move when the video is playing (controlled by simply calling the "play" method when a button is clicked). The behaviour is apparent whether the video has been played or not:
$("#stage2 video").on("timeupdate", function() {
$("#ticker").css("left", ($("#timeline").width() * $("#stage2 video").prop("currentTime")) / $("#stage2 video").prop("duration") + "px");
$("#timecode div").text(sec2smpte($("#stage2 video").prop("currentTime")));
});
$("#play_pause").click(function() {
if ($("#play_pause img").attr("src") == "control.png")
{
$("#play_pause img").attr("src", "control_pause.png");
$("#stage2 video").trigger("play");
}
else
{
$("#play_pause img").attr("src", "control.png");
$("#stage2 video").trigger("pause");
}
});
UPDATE: I ran my source video through FFmpeg and that seemed to fix the issue. It seems to be a seeking problem with some .mp4 files. I also noticed that it would exhibit similar behaviour if it tried to seek backwards.