I'm working on a website and have an mp3 embedded in a page like this:
<embed src="/resources/mymusic.mp3" height="20" width="300" autostart="false" loop="true">
however when that page loads in Firefox the browser window gets deselected, hence disabling user interaction with various elements until they click inside the window again. firefox is still the
app in focus but the browser window itself becomes deselected. this doesn't happen in Safari.
using:
<object height="20" width="300" data="/resources/mymusic.mp3"></object>
gave the same result.
also tried
<audio controls>
<source src="/resources/mymusic.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>
element but it won't load at all in firefox.
Any suggestions on how to keep the window active?
Related
I have a situation here were I got to click two play buttons on an google drive video embed
This is my code for showing the video
<iframe src="https://drive.google.com/file/d/video_id/preview" width="960" height="540" allowfullscreen="true"></iframe>
After the video is loaded it displays a video thumbnail with play button and then when I click on it, it goes to another play button with a youtube like interface.
How can I get rid of this two play button? I just need one click then video should play after.
You may want to check this thread on how to play video from Drive using JavaScript. It stated that Google provides some GET-params like export and id with google-drive to give you the ability to insert an uploaded video into a HTML5-video-tag.
$("#play").click(function() {
$("#video")[0].play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="play" style="margin-top: 300px;">Play</button>
<video id="video" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=0B8-qLYDzDfCyRF9vOE9sWmx5YjA" type='video/mp4'>
Your browser does not support the video tag.
</video>
Check this link for additional information: Get Google drive video embed code using api
Pause/play control of HTML5 video does not working as expected in safari browser. It is working fine in other browsers. Please help me on this.
After clicking the pause mode icon, video is still playing. When I click a mute icon, video is stopped/playing vice versa. Attached image for reference.
Video controls Image as reference
<video controls id="video-gpro">
<source src="#Model.Manualvideo" type="video/mp4">
</video>
Following error is displaying in console when clicked the play/pause icon.
Unhandled Promise Rejection: [Object DOMError]
N (anonymous function)
N rejectPromise
In case someone stumbles upon this error with context that is in description
Check out Google Article
Basically no <source> tag inside <video>
I am using Safari version 5.1.7 (7534.57.2) and Windows 8.1
I have a webpage that contains the following HTML:
<audio controls >
<source src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.mp3" type="audio/mpeg">
<source src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.ogg" type="audio/ogg">
<embed height="50" width="100" src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.mp3">
</audio>
When I open this page in Chrome, IE, Firefox, and Opera the audio does 'not' play (most browsers automute the volume as well). However, under Safari it automatically plays.
How do I prevent the quicktime player in Safari from autoplaying the audio file when the page loads?
I want the user to have a choice about clicking the play button.
You can try setting the preload attribute like this
<audio controls preload="metadata" >
<source src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.mp3" type="audio/mpeg">
<source src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.ogg" type="audio/ogg">
<embed height="50" width="100" src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.mp3">
</audio>
I have VideoJS displaying a video in a modal window in a Wordpress website. I'm NOT using a videoJS plugin, I've loaded the latest VideoJS version to the home directory. The code for the video tag is in a separate non-Wordpress html file all on it's own.
The video IS working fine in Safari on the Mac, it's also working fine in Firefox on Windows. It is NOT working properly in Firefox on the Mac.
I have traced this issue back to it being caused by the 'controls' option in the tag. As soon as I change the options to 'autoplay' and take out 'controls', the video plays perfectly well in Firefox and Safari on the Mac.
More specifically it appears to be the small timer (showing how much video has played) on the skin's slider.
The skin in Firefox is different that the one in Safari. The one in Safari is BLACK and displays the time to the left and right of the slider at the bottom of the player. The one in Firefox is GREY and has the time in a small raised box above the slider at the bottom of the player. It is this raised box that seems to be causing an issue with the video playing in Firefox. The video is only playing slowly on a strip just above the slider and only to the height of the timer box.
I have tried putting:
<script>
_V_.ControlBar.prototype.options.components = {'playToggle':{}}
</script>
right under the call to
<script src="http://vjs.zencdn.net/c/video.js"></script>
in the head of the Wordpress page that has the modal window displaying the separate html page containing the code.
That did NOT work; both Safari and Firefox still show the controls at the bottom of the player.
I also tried adding:
.vjs-default-skin .vjs-time-controls {display: none !important;}
to my WP theme's stylesheet. That did NOT work either.
QUESTION 1: Why is Firefox using a different skin for VideoJS than Safari? If I can get the same controller for Firefox (ie one without the raised time code box) then the video may play normally.
QUESTION 2: How can I limit the controls to show only the large centred play button without showing the controls at the bottom of the player? Again, not having the raised time code box may make the video display normally in Firefox.
QUESTION 3: All this came about because I discovered iPhone and iPad do not play videos with the autoplay setting. I had originally set the option for autoplay in the tag without 'controls', but because it wasn't working in iPad (just getting a black background to the video) I took out 'autoplay' and added the 'controls'. And that's when I noticed the problem in Firefox. So if I can't fix the issue with having controls in Firefox and it not working, is there a way to get round the black screen issue on the iPad and using 'autoplay' for Firefox without controls?
Please let me know if there's any other information you need.
You shouldn't need the code as it's all working; the problem only arises in Firefox on the Mac when I add 'controls' to the tag. And I'm sure this can be fixed by using a different skin or getting rid of the controls at the bottom of the video (well, I'm hoping that will fix it!).
BTW I'm using this in the head of my WP template
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
Oh, and Firefox is not falling back to the Flash Flowplayer, it's definitely playing the ogg file in the HTML5 video tag.
ctagney, thanks for taking the time to respond.
Question 1
Hmm, strange.
I have this in the header at the moment:
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
This is the code I have in the html page (I've replaced actual domain with ... as I don't want links to the site --- you can see the video on www. horizonyachtsgrenada .com/ new-yacht-sales-grenada/ at the top of the right-hand side bar:
<div style="margin:0; Padding:0;">
<video id="salesvideo" class="video-js vjs-default-skin" preload="auto" controls width="540" height="320"
poster="http://.../videos/horizon-dream-makers-splash.jpg"
data-setup="{}">
<source src="http://.../video/HORIZON_FINAL_HD.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://.../video/HORIZON_FINAL_HD.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="http://.../video/HORIZON_FINAL_HD.webm" type='video/webm; codecs="vp8, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="540" height="320" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":[http://.../videos/horizon-dream-makers-splash.jpg", {"url": "http://.../video/HORIZON_FINAL_HD.mp4","autoPlay":true,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://.../videos/horizon-dream-makers-splash.jpg" width="540" height="320" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
</div>
Any ideas why it's not using the video.js?
Question 2
I've added that code to the page now, so hopefully once it's picking up video.js it will pick this up. I assume I won't need 'controls' in the video tag for this to work, is that correct?
Question 3
So, if I'm understanding your link correctly, I'm right in changing it from autoplay to having controls for it to work on the iPad and iPhone.
New issue:
It's not working in Chrome even though there is a webm version of the video! I'm beginning to go greyer ... just want the video to work now!! :(
Any help much appreciated.
Cheers,
Tracy
EDIT: BTW the video does play on Safari, Firefox, and Chrome on a different site (different server, different video code) so it's not the video itself causing an issue.
The players you're describing in firefox and safari sound like the native video players for each browser. In other words, you're not actually using video.js.
Question 1
Once you get it working, you'll notice that the players should look identical to one another in Safari and Firefox. Without seeing your code it's hard to say why your video.js player isn't getting initialized, but you need to do one of the following:
Include a data-setup='' tag in your video element, which you can use to specify options via a JSON value.
Have a separate script that calls _V_("video id", {}) once the page has loaded.
I recommend you use the second option since you have some additional setup to handle (see: below)
Question 2
The big play button you want is automatically hidden when controls are turned off, so you should just call it's show() method once the video player has been initialized.
<script>
_V_("example", {}, function() { this.bigPlayButton.show(); });
</script>
See the following for a working example.
http://jsbin.com/ijipag/2/edit
Question 3
See Can you autoplay HTML5 videos on the iPad?
The issue was I didn't include the call to the video.js
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
in the separate (non-WP) html page that's shown in the modal (FancyBox iframe) window. I've now included that and it's successfully calling the video.js and showing the big play button without the bottom controls in Safari and Firefox.
It's still NOT working in Chrome. In Chrome, when you click the play button it's just showing the poster image and the spinning loading gif.
UPDATE: Got it working in Chrome by moving :
<source src="http://www.horizonmotoryachts.com/video/HORIZON_FINAL_HD.webm" type='video/webm; codecs="vp8, vorbis"' />
above the calls to the mpeg4 and ogg files.
Tested on Firefox and Safari on Mac and its still working.
I'm working on a Silverlight 4 application that seems to run fine in IE, however when I try to view the application in FireFox, the application loads, but is not visible. The application is definitely loading, despite not being visible. I've run Fiddler and can see that the application makes the two web service calls I expect it to when the app loads.
The HTML hosting the Silverlight plugin is very simple, containing only a div with an object tag inside. There are no styles that would impact visibility of the containing div.
The HTML is below:
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/Shell.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
<iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
One last point that I just noticed, the problem with the Silverlight app not being visible only occurs when viewing the HTML page in FireFox via my local IIS. If I open the HTML page directly from the file system, the Silverlight app is visible.
Any suggestions as to how to fix this visibility problem would be greatly appreciated.
I was able to solve the problem by setting the size of the object tag to a fixed pixel size. Previously we had it set to 100% width and height. Once I changed to fixed pixel for width and height, I was able to view our application in both IE and FireFox.
You need to add the MIME type for .xap, .xaml, and .xbap within IIS.