On my code fetched the audio URL from the database and displayed it in the console but I couldn't fetch that in UI.
How to do that?
HTML code
{Question.voiceRecord === ""?
<ReactAudioPlayer src="my_audio_file.ogg" autoPlay controls />
:
<ReactAudioPlayer ref={(Question.voiceRecord) => { this.rap = voiceRecord; }}/>
}
console audio URL
How To play audio?
Related
i am implementing a vimeo video in my app using the below code:
html
and
ngAfterViewInit() {
this.player1 = new Player(this.playerContainer.nativeElement);
this.player1.on('play', function(data) {
console.log('played the video!');
});
this.player1.on('pause', function(data) {
console.log('paused the video!',data);
});
}
The player and all its functions work until i pass a new link to the iframe, the video plays but it doesn't return when the video was paused or played, unless i reload the page - does anyone know how to fix this? The code for the vimeo player is in a component which is being called by the main page and a new link is passed to it when some item is pressed Also, i am using Ionic5 and Angular.
i have avi file in local file directory
file:///storage/emulated/0/ionic_download/2022-02-07/18/18-59-32.avi
but the problem is that I want to play video with above file path.
data[i].toURL() is above file path
html
<video controls autoplay width="{{top_box_width}}" height="{{top_box_height}}">
<source [src]="play_path" type="video/mp4">
</video>
.ts
let myURL = normalizeURL(data[i].toURL() ) + "#t=0.1";
console.log("222"+myURL);
this.play_path = this.sanitizer.bypassSecurityTrustResourceUrl(data[i].toURL());
console.log('Cccccontent path cahnged ', this.play_path);
this.dismiss_loading();
both myURL and play_path is not playing video…
how can I play video?
thank you
chorme://inspect result is
what is really weird for me is that with fileopener.open
it works. so file path is not wrong or not found
this.fileOpener.open("file:///storage/emulated/0/ionic_download/2022-02-07/18/18-59-32.avi", 'video/mp4')
.then(() => console.log('File is opened'))
.catch(e => {
console.log('Error opening file', e);
if(e.message == "File not found"){
alert("파일이 없습니다.");
this.localstorage_remove(file_name);
}
});
AFAIK you should not define savePath inside functions. Your html code cannot even find the variable savePath because its being defined and initialized much later after the whole HTML has been rendered.
Define your savePath variable as global then initialize it inside your function using this.savePath. Your code should work.
I can play video files from a IIS web server to a client web app as long as they reside in the webroot directory on the server. I would like to play them from a shared directory not in the webroot, however. Is this possible??
Javascript function calling up video file, Videos is share name:
function loadAnotherVideo() {
var video = document.getElementById("video");
var source = document.getElementById("fileSelector");
var path = "//192.168.0.18/Videos/" + source.value;
alert(path);
video.src = path;
video.load();
video.play();
}
You should be able to do something like this, just make sure the App Pool has reading rights on the folder where the file is stored
File - video.aspx
private void Page_Load(object sender, System.EventArgs e)
{
//Set the appropriate ContentType.
Response.ContentType = "video/mp4";
//Get the physical path to the file.
string FilePath = "c:\path-to-video\video.mp4";
//Write the file directly to the HTTP content output stream.
Response.WriteFile(FilePath);
Response.End();
}
HTML
<video width="320" height="240" controls>
<source src="video.aspx" type="video/mp4">
Your browser does not support the video tag.
</video>
Based on a comment
Here is a post showing how to set/change a video source using javascript:
Changing source on html5 video tag
I took an mp4 video, encoded it for HTTP Live Streaming (HLS) using ffmpeg — resulting in a series of myvideo.ts files and a myvideo.m3u8 playlist — and am attempting to play it using the HTML <video> tag in Safari, with the native HLS capabilities of that browser:
<video id="myvideo" src="myvideo.m3u8" loop="loop"></video>
It plays, once. But despite the "loop" attribute in the video tag, it doesn't loop. It stays frozen on the last frame of the video.
If I try to detect the end of the video using an event listener as described here:
Detect when an HTML5 video finishes
… that event never seems to fire.
The "paused" property in javascript (document.getElementById('myvideo').paused) evaluates to false, even after the video has played once and stopped.
How can I get the video to loop in Safari?
HLS is intended to be a live stream, so it never actually "finishes" in order to automatically loop. I used a JavaScript timer as a hack to get around this:
var LOOP_WAIT_TIME_MS = 1000,
vid = document.getElementById("myvideo"),
loopTimeout;
vid.addEventListener('play', function() {
if (!/\.m3u8$/.test(vid.currentSrc)) return;
loopTimeout = window.setTimeout(function() {
loopTimeout = null;
vid.pause();
vid.play();
}, (vid.duration - vid.currentTime) * 1000 + LOOP_WAIT_TIME_MS);
});
vid.addEventListener('pause', function() {
if (!/\.m3u8$/.test(vid.currentSrc)) return;
if (loopTimeout) {
clearTimeout(loopTimeout);
loopTimeout = null;
}
});
Trying to get the hooks for the audio tag events in the HTML5 through QtWeKit. For that I created a sample application that just loads a html file through QwebView.
The html file contains a HTML5 audio tag.
<audio id="audio_with_local_controls" controls>
<source src="nokia-tune.mp3" type="audio/mp3" />
</audio>
In the script side, I'm trying to get the hooks for the audio tag play, pause and ended events.
/// AUDIO TAG EVENTS.
var aid = document.getElementById('audio_with_local_controls');
function onplay_(){
console.log('onplay');
alert('onplay');
}
function oncanplay_(){
console.log('oncanplay');
alert('oncanplay');
}
function onpause_(){
console.log('onpause');
alert('onpause');
}
console.log(aid);
aid.onplay = onplay_;
aid.oncanplay = oncanplay_;
aid.onpause = onpause_;
aid.onprogress = function onprogress_(){ alert('onprogress'); }
aid.onended = function onended_(){ alert('onended'); }
aid.onabort = function onabort_(){ alert('onabort'); }
The code sequence might not make sense as I was trying something up and down in the code.
Chrome was able to capture the hooks. But QWebView remains silent on this, nothing gets captured.
Is it that QWebView doesn't support this? or Am I writing something wrong?