My application is a simple html5 video playing application. And i would like to mute the application using a button. But i can't find any documentation
This is not possible with QtWebKit's QWebView as far as I know. You should switch to QtWebEngine (it's successor) instead, which has a QWebEnginePage::audioMuted property.
Hello A muted video: The muted attribute is a boolean attribute.
When present, it specifies that the audio output of the video should be muted.
<video controls muted>
Related
I want to add a video that plays by itself and loops, without showing controls. When I add 'controls' to my code, the controls show and the video plays just fine. When I change 'controls' to 'autoplay' and refresh the testing page, the video doesn't play. Here is the code:
<video src="./images/Kusko Enterprise Catering Services - Google Chrome 2021-10-03 16-30-57_Trim.mp4" class="kusko_catering_video" autoplay></video>
Please could I get help on trying to figure out my mistake?
If you have put the autoplay option in element. It will not play on refresh unless you put muted too. This is a special case in browsers which allows to prevent the video to be played out loud in case of just refresh.
so change your element to:
<video id="video-field" src="files/video" loop autoplay muted></video>
and for angular as someone asked in the comments.
<video [muted]="'muted'" loop autoplay [src]="videoSource"></video>
I think this is what you want.
<video src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/h264.mov" autoplay loop></video>
Your code seems good, you have to just add loop attribute for continuous play. I think the problem is in your source.
You have to have first interaction on your page before that your player plays.
The video I posted on the home page of my website did not play on the first load or after refreshing, while it was played after I went from other pages to the home page. The problem could be solved if I added the muted attribute to the video element, but I do want the background music to play. Below is my code:
componentDidMount() {
document.getElementById("opening").play();
}
......
<video autoPlay id="opening">
<source src={opening} type="video/mp4"></source>
</video>
Thanks!
I faced the similar problem. then I did this. Though it's not user friendly but after this it worked
<video
src={require('../../resources/sampleVid.mp4')}
autoPlay = {false}
controls = {true}
loop = {true}
muted = {false}
className="flex justify-center mw7-ns"
/>
I am afraid, but there is no way to play audio in the HTML 5 video automatically.
It is clarly mentioned here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Last modified: May 16, 2020, by MDN contributors
Sites that automatically play audio (or videos with an audio track)
can be an unpleasant experience for users, so should be avoided when
possible. If you must offer autoplay functionality, you should make it
opt-in (requiring a user to specifically enable it). However, this can
be useful when creating media elements whose source will be set at a
later time, under user control. See our autoplay guide for additional
information about how to properly use autoplay.
In some browsers (e.g. Chrome 70.0) autoplay doesn't work if no muted attribute is present.
HTML5 video player has been showing controls only in iOS 12.x.x even when the controls are set to false in video tag but all other browsers are working fine and don't show the controls.
The scenario is that whenever page loads we autoplay the video on banner but if battery saver feature is turned on then it will not autoplay the video shows the play button with initial thumbnail (only in iOS 12.x.x) while in other browsers it shows the initial thumbnail of the video without any play button.
My code looks like this:
<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
// sources here
</video>
I am looking for the solution to hide this play icon (shown in attached image) but if that's not possible then is there any solution through which I can know that power saving mode is turned on and hide the video (because I have a background for backward compatibility).
I've given a look as well, and it seems as many CSS and JavaScript solutions out there don't work anymore, because since iOS 12 there is a new way of handling videos (https://www.reddit.com/r/apple/comments/8p4tpm/ios_12_to_include_custom_html_video_player/).
Now I came up with this idea, which as a purist I don't like, but it might do the trick: A video thumbnail (as image) overlayed over the video, that gets hidden, once the video is started.
You could have a standard thumbnail with title, or dynamically generate it (see http://usefulangle.com/post/46/javascript-get-video-thumbnail-image-jpeg-png as an idea).
Hope this helps!
I know this was asked over one year ago but I wanted to share the solution for others.
What I did was, I removed the autoplay attribute from the video-element and because I still wanted it to behave as with the attribute I added following js.
const video = document.getElementById('video-input');
video.play();
Setting autoplay to false and controls to false did work for me:
<video
src='xxxx'
muted
className='landing__empty-video'
loop
playsInline
autoPlay={false}
controls={false}
preload='auto'
type='video/mp4'
/>
Bear in mind this was React, in html case it would be "false".
After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.
document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="hello" playsinline preload muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/
Anyone does have the idea of how apply the html5 code for video and allow autoplay in Ios10 or latest? Cause seems like Ios10 do have the latest update and it couldn't allow Autoplay. Following are the tag that im using.
<video preload="auto" id="lady_vid">
<source src="vid/lady.mp4" type="video/mp4"></source>
</video>
I was able to enable autoplay by using the following code:
<video autoplay muted playsinline>
<source src="http://example.com/video.mp4">
</video>
You need autoplay to enable autoplay.
You need muted, because only videos without audio track or with disabled audio track can be autoplayed.
You need playsinline, because only inlined videos can be autoplayed. This will also cause your video to be displayed inside the page itself and not be opened in fullscreen video view.
I was only able to enable it after specifying full url to the video, e.g. http://example.com/video.mp4 (this is a fake url obviously). It was not working with relative url, such as
<source src="video.mp4">
or
<source src="folder/video.mp4">
===========
Update:
After testing video on iOS10 for a while, I've realized that iOS10 fails to play a lot of videos. It's not a codec problem: if you encode two videos with exactly the same parameters, one might play and the other one won't.
What's even more intresting, is that most videos that cannot be played on iOS10 play perfectly well on iOS9 and iOS8.
So if your video isn't playing, try opening it with iOS Safari browser via direct link - maybe it doesn't work at all on iOS10.
On the front page of this website, there is a sticky post titled "National Radio Advertising Campaign ForACURE" which contains the following HTML:
<embed type="audio/x-wav" src="http://www.foracure.org.au/wp-content/uploads/FOR-A-CURE-RADIO-Daniel-45sec.mp3" autoplay="false" height="20" width="200" autostart="false">
However, when I load this website in Chrome v31.0.1650.57 m, the audio plays automatically, even though both autoplay and autostart are set to false.
Is there a better cross browser method of embedding this audio?
Chrome doesn't seem to understand true and false.
Use autostart="1" and autostart="0" instead.
Source: (Google Groups: https://productforums.google.com/forum/#!topic/chrome/LkA8FoBoleU)
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
Remove autoplay
if you want to disable auto playing video.
Just set using JS as follows:
<script>
var vid = document.getElementById("myVideo");
vid.autoplay = false;
vid.load();
</script>
Set true to turn on autoplay. Set false to turn off autoplay.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_autoplay
None of the video settings posted above worked in modern browsers I tested (like Firefox) using the embed or object elements in HTML5. For video or audio elements they did stop autoplay. For embed and object they did not.
I tested this using the embed and object elements using several different media types as well as HTML attributes (like autostart and autoplay). These videos always played regardless of any combination of settings in several browsers. Again, this was not an issue using the newer HTML5 video or audio elements, just when using embed and object.
It turns out the new browser settings for video "autoplay" have changed. Firefox will now ignore the autoplay attributes on these tags and play videos anyway unless you explicitly set to "block audio and video" autoplay in your browser settings.
To do this in Firefox I have posted the settings below:
Open up your Firefox Browser, click the menu button, and select "Options"
Select the "Privacy & Security" panel and scroll down to the "Permissions" section
Find "Autoplay" and click the "Settings" button. In the dropdown change it to block audio and video. The default is just audio.
Your videos will NOT autoplay now when displaying videos in web pages using object or embed elements.
Just change the mime type to: type="audio/mpeg", this way chrome will honor the autostart="false" parameter.
I had assumed that autoplay="false" applied to all other browsers, besides Chrome, so I added
autoplay="false" autostart="0"
to each video tag. With six videos on the page it was a tower of bable (didn't work).
The solution is to remove autoplay entirely and just add
autostart="0"
to each video tag. This worked for Chrome, Firefox, and MS Edge.
Apparently the lack of an autoplay attribute is sufficient for the other browsers.
This will prevent browser from auto playing audio.
HTML
<audio type="audio/wav" id="audio" autoplay="false" autostart="false"></audio>
jQuery
$('#audio').attr("src","path_to_audio.wav");
$('#audio').play();
<embed ... autostart="0">
Replace false with 0
I removed "autoplay" and "autostart", it worked
This is my code:
<video width="427" height="240" controls >
<source src="/abc.mp4" type="video/mp4">
</video>
add attribute controls to video tag. It worked on my code
the below codes helped me with the same problem.
Let me know if it helped.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="YOUR AUDIO FILE" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
The problem is your plugin. To solve this is to only enter this address:
chrome://flags/#enable-NPAPI
Click activate NPAPI, and finally restart at the bottom of the page.