I'm developing Windows/Windows Phone 8.1 apps using PhoneGap(HTML, JS, CSS, JQM) and some Native/Windows Runtime Component. I want to play a video in a html page. My video file is located inside my Application Folder.
I don't know what's wrong. Please help me.
In the HTML,
I have added:
<div id="content">
<button onclick="domainObject.playVideo()" type="button" data-theme="b">Play Video</button>
<video id="video" src='' type='video/mp4' width="400" autoplay="autoplay" controls></video>
</div>
And in the JS:
var domainObject = {
playVideo: function () {
var vidPath = Windows.Storage.ApplicationData.current.localFolder.path + "\\test.mp4";
var video = document.getElementById('video');
var source = document.createElement('source');
source.setAttribute('src', vidPath);
video.appendChild(source);
video.load();
video.play();
}
Related
I am displaying a video on my website like this:
<video>
<source src={link} type="video/mp4" />
</video>
And I would like to extract duration of the video from the provided src link, to display it somewhere else on the page. Assume we have the link stored as a string, how will I extract the duration of the video?
Sample src link: https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d
to get the duration of the video you have to wait for it to load using the event listener and that way you are sure you have the data, this is a link you can use to help you learn more about the API, here.
let video = document.getElementById("video")
video.addEventListener('loadeddata', function() {
console.log("test", video.duration)
// Video is loaded and can be played
}, false);
function myFunction() {
alert(video.duration);
}
myFunction
<html>
<h1>video duration</h1>
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="video">
<source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4" />
</video></html>
The video tag has a "duration" property, which will tell you the length of a video.
https://www.w3schools.com/tags/av_prop_duration.asp
<html>
<body>
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4">
</video>
<script>
function myFunction() {
let vid = document.getElementById("myVideo");
alert(vid.duration);
}
</script>
</body>
</html>
I am using audio tag to play a wav audio, My url is genereted by URL.createObjectURL() and the url is like blob:http://localhost/9fa2ef06-ade6-4027-89f8-06cd2c176405
As the url has no extension, I have some issue with safari
The following code is works on chrome and not works on safari(Audio player is disabled)
<audio src="MY_BLOB_URL" type="audio/wav">
</audio>
The following code is works on safari and not works on chrome
<audio controls>
<source src="MY_BLOB_URL" type="audio/wav">
</audio>
I tried weird codes like the following and cannot find any way to works on both browsers
<audio src="MY_BLOB_URL" type="audio/wav">
<source src="MY_BLOB_URL" type="audio/wav">
</audio>
What's wrong here? And how can I have a cross-browser HTML5 audio player with single code?
I've tested the following code on Windows PC using Chrome, Edge & Firefox.
Let's hope it also works on Safari.
PS: For future readers, this code would also work with an MP3 blob (set as accept=".mp3").
<!DOCTYPE html>
<html><head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> </head>
<body>
<div style="z-index: 1; overflow:hidden; position: absolute; top: 100px; left: 50px">
<audio id="tag_Audio1" controls>
<source type="audio/wav">
</audio>
</div>
<br><br><br><br>
<div style="z-index: 1; overflow:hidden; position: absolute; top: 10px; left: 50px">
<p> Choose an WAV file...</p>
<input type="file" id="choose_media" accept=".wav" />
</div>
<script>
var file; var reader;
var tmpElement; //# is reference to aTag for holding image content.
var file_Blob; //# is reference to file BLOB (data of selected file).
const myAudio = document.getElementById("tag_Audio1");
document.getElementById("choose_media").addEventListener("change", onFile_Selected, false);
function onFile_Selected(evt)
{
file = evt.target.files[0]; //# access to selected file
reader = new FileReader();
reader.readAsDataURL(file); //# load selected file as Blob
reader.addEventListener("loadend", onFile_Loaded, false);
}
function onFile_Loaded(evt)
{
if (evt.target.readyState == FileReader.DONE)
{
//# remove any current SRC
myAudio.removeAttribute("src");
//# create blob
file_Blob = (window.URL || window.webkitURL).createObjectURL(file);
//# apply blob & test play
myAudio.setAttribute("src", file_Blob);
myAudio.load();
myAudio.play();
}
}
</script>
</body>
</html>
I am trying to merge Two videos taken as input by the user and then display it and also provide a download link for the final video. My code doesn't merge the two videos but plays them one after the other. So how can I merge them together and provide a download link?
The following is my HTML code.
<!DOCTYPE html>
<html>
<head>
<title>Video Editor</title>
</head>
<body>
<h1 align="center">Video editor</h1>
<h3> Merging Videos</h3>
<video width="400" controls id="video">
<source src="" id="video_here" class="active">
Your browser does not support HTML5 video.
<source src="" id="newvideo_here" class="">
</video>
<br><br>
<input type="file" name="file[]" class="file_multi_video" id= "myvid" accept="video/*">
<br><br>
<input type="file" name="file[]new" class="new_file_multi_video" id= "newmyvid" accept="video/*">
<br>
<br>
<br>
<h3> Video Spliting</h3>
<button>video spliting</button>
<h3> add audio to video</h3>
<script type="text/javascript" src="assets/js/videoEditor.js"></script>
</body>
</html>
javascript code:-
var myvid = document.getElementById('myvid');
var video = document.getElementById('video');
myvid.addEventListener("change",function(){
var source = document.getElementById('video_here');
console.log(source);
source.src = URL.createObjectURL(this.files[0]);
video.load();
video.addEventListener('ended', function(e) {
// get the active source and the next video source.
// I set it so if there's no next, it loops to the first one
var activesource = document.querySelector("#video source.active");
var nextsource = document.querySelector("#video source.active + source") || document.querySelector("#myvideo source:first-child");
console.log("nextsource"+ nextsource);
// deactivate current source, and activate next one
activesource.className = "";
nextsource.className = "active";
// update the video source and play
video.src = nextsource.src;
video.play();
});
});
var myvid = document.getElementById('newmyvid');
//var video = document.getElementById('video');
myvid.addEventListener("change",function(){
var source = document.getElementById('newvideo_here');
console.log(source);
source.src = URL.createObjectURL(this.files[0]);
console.log(source.src)
//video.load();
});
I think you should mix the videos yourself using a technique like the one in this link: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_manipulation. It manipulates each pixel of each frame making it gray. Perhaps you could play the two videos simultaneously and mix the pixels together.
I don't know how to download the final generated video.
I'm working on a webpage with videos.
When refraishing the page, I want to randomly start a muted video. After rolling on it, the video is unmute.
I've already done the randomly videos javascript but I can't mute the video...
When I launch the page, the video starts with sound...
Here is my code :
<div id="mixmen" onmouseover="play()" onmouseout="mute()" onclick="location.href='http://ap-mixmen.com/','_blank'" >
<div class="video">
<section id="videos">
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen.mp4" type="video/mp4"></video>
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen2.mp4" type="video/mp4"></video>
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen3.mp4" type="video/mp4"></video>
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen4.mp4" type="video/mp4"></video>
</section>
</div>
<script>
(function () {
"use strict";
document.getElementById("videos").muted = true;
var videosSection = document.getElementById("videos");
var videosSectionClone = videosSection.cloneNode();
var videos = videosSection.getElementsByTagName("video");
var randomVideo = videos.item(Math.floor(Math.random() * videos.length)).cloneNode(true);
randomVideo.removeAttribute("controls");
randomVideo.setAttribute("preload", "auto",);
videosSectionClone.appendChild(randomVideo);
videosSection.parentNode.replaceChild(videosSectionClone, videosSection);
randomVideo.play();
})();
var videosSection = document.getElementById("videos");
function play()
{
video.muted = false;
}
function mute()
{
video.muted = true;
}
</script>
</div>
Do you know why it doesn't work ?
try adding muted to the video tag
Ex:
Try adding "muted" to the video tags.
<video id="videos" preload="none" muted style="height:100%">
<source src="imgs/mixmen.mp4" type="video/mp4"></video>
Hi First section id must be different to your video tags then your video tags also must have a different id and finally you apply the "muted=true" to your selected element . If you want to mute all videos on the page load you can access to them by tag name then apply the mute as follow :
const videos= [...document.getElementsByTagName('video')];
videos.forEach((video) => { video.muted = true });
I'm using html5 video player to play some videos and trying to use external controls with javascript. manage to get the player play and pause. but i cannot get it to mute and unmute using the buttons. if someone can help with this matter its highly appropriated.
Here is the HTML code
<video id="myMovie" width="600" height="600" loop preload="auto" video poster="img.jpg" controls>
<source src="my-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
<button id="volButton">Mute</button>
JavaScript Code
function playMymovie() {
var element = document.getElementById('myMovie');
var element = document.getElementById('pbutton');
playButton.addEventListener('click', PlayOrPause, false);
volButton.addEventListener('click', VolMute, false);
}
function PlayOrPause() {
if(!myMovie.paused && !myMovie.ended) {
myMovie.pause();
}else{
myMovie.play()
}
}
function VolMute(){
if(!myMovie.muted){
myMovie.muted(true);
}else{
myMovie.muted(false);
}
}
Thanks in advance.
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="muteUnMute()">Mute/UnMute</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function muteUnMute()
{
if( !myVideo.muted)
myVideo.muted='muted';
else
myVideo.muted=false;
}
</script>
</body>
</html>
Try this:
var videoObject = document.getElementById('myMovie');
videoObject.muted = !videoObject.muted;