I am trying to reload the html5 audio when the page is loaded since it has a dynamic path but I can't seems to access the $ref property either on mounted or watch here is the code
<audio ref="player" controls>
<source v-bind:src="track">
Your browser does not support the audio element.
</audio>
watch:{
details : function(){
this.verdict = ''
this.track = '../../public/wavfile/' + this.details.file;
console.log(this.$refs)
}
},
mounted(){
console.log(this.$refs)
}
According to documentation, you cannot access refs on initial render.
try this
console.log(this.$refs['player'])
or
console.log(this.$refs.player)
Related
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't find a solution for this. Sorry to put angular and html as tags - it's because I've no clue who is the guilted.
Yes, I saw on Stack Overflow and many others sources that a video "muted" basically has no restrictions. But in my scenario... well, sometimes it works, sometimes it's not works...sometimes I do a refresh and it's works.
Very random.
<video *ngIf="p.background.type==='video'" [ngStyle]="{opacity: p.background.backgroundOpacity}"
class="backgroundElement" src="../assets/backgrounds/videos/{{p.background.file}}"
[ngClass]="{currentVideo: i === this.pageIndex}"
muted loop></video>
const video = this.elRef.nativeElement.querySelector('.currentVideo').play();
if (video !== undefined) {
video.then(_ => {
console.log('worked at this time');
}).catch(error => {
console.log(error);
});
}
}, 2000);
The error I got from promise is : message: "play() failed because the user didn't interact with the document first."
But it's a muted video. So, any suggestion ?
Background
Since Chrome version 66, videos that should autoplay on my site may be prevented from playing if the user hasn't been on my site before.
<video src="..." autoplay></video>
Question
How do I detect if the video autoplay was disabled? And what can I do about it?
The autoplay attribute
According to web standard specifications, the autoplay attribute should only be a hint for what the browser should to with the media element. Neither of W3 of WHATWG web specifications mentions anything about when to prevent autoplay for media, which means that each browser probably have different implementations.
Autoplay policies
Autoplay policies implemented by each browser now govern whether video should be allowed to autoplay.
Chrome uses something they call Media
Engagement Index and you can read more about that here and their autoplay policy here.
Safari developers made a post on webkit.org
regarding this.
Firefox seems to put it in the hands of the user to choose if it's allowed or not (link).
Best practices
Detecting if autoplay is disabled
Instead of using autoplay on your element, you can use the play() method on the video and audio element to start playing your media. The play() method returns a promise in modern browsers (all according to the spec). If the promise rejects, it can indicate that autoplay is disabled in the current browser on your site.
can-autoplay is a library solely for detecting autoplay features for both video and audio elements.
When autoplay is disabled
The good thing is that when you know that autoplay is disabled you can, in some browsers, then mute the video and try the play() method again, while showing something in the UI that says that the video is playing while muted.
var video = document.querySelector('video');
var promise = video.play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay not allowed!
// Mute video and try to play again
video.muted = true;
video.play();
// Show something in the UI that the video is muted
});
}
<video src="https://www.w3schools.com/tags/movie.ogg" controls></video>
For me best solution was:
function _callback_onAutoplayBlocked() {
// do something, for example "show big play button"
}
function isSafari() {
var chr = window.navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
var sfri = window.navigator.userAgent.toLowerCase().indexOf("safari") > -1;
return !chr && sfri;
}
function _checkAutoPlay(p) {
var s = window['Promise'] ? window['Promise'].toString() : '';
if (s.indexOf('function Promise()') !== -1 || s.indexOf('function ZoneAwarePromise()') !== -1) {
p.catch(function(error) {
console.error("_checkAutoPlay, error:", error)
if(error.name == "NotAllowedError") { // For Chrome/Firefox
console.error("_checkAutoPlay: error.name:", "NotAllowedError")
_callback_onAutoplayBlocked();
} else if (error.name == "AbortError" && isSafari()) { // Only for Safari
console.error("_checkAutoPlay: AbortError (Safari)")
_callback_onAutoplayBlocked();
} else {
console.error("_checkAutoPlay: happened something else ", error);
// throw error; // happened something else
}
}).then(function(){
console.log("_checkAutoPlay: then");
// Auto-play started
});
} else {
console.error("_checkAutoplay: promise could not work in your browser ", p);
}
}
var video1 = document.getElementById('video1');
_checkAutoPlay(video1.play());
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?