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>
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
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?
I enhance a mobile page by ASP MVC. How can I embed the video file in the cshtml page that iphone/android can autoplay the video when browse the page?
Need to use html5 ?
Thanks
Joe
There is no difference between ASP.NET MVC or any other web development framework.
Here is sample from w3schools.com on HTML5 video autoplay Attribute
<video controls="controls" autoplay="autoplay">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
I've been reviewing material on different ways developers are adding Flash fallback to their HTML5 sites.
I have this test code with dummy video:
<video width="944" height="532" controls preload="auto" poster="imgs/vidPosterImg.jpg">
<source src="videos/2010reel.mp4" type="video/mp4" />
<source src="videos/2010reelogg.ogv" type='video/ogg; codecs="theora, vorbis"'>
<embed src="flash/mainsceen.swf" type="application/x-shockwave-flash" width="944" height="531" allowscriptaccess="always" allowfullscreen="true"></embed>
<object width="320" height="240" type="application/x-shockwave-flash"
data="flash/mainsceen.swf">
<param name="movie" value="flash/mainsceen.swf" />
<param name="allowfullscreen" value="true" />
</object>
<object type="application/x-shockwave-flash" data="flash/mainsceen.swf" width="944" height="532">
<param name="movie" value="flash/mainsceen.swf">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always">
</object>
</video>
The mp4 works and the ogv works in Firefox. but Flash does not.
Also, in Safari, the poster image seems to be skipped over to the videos first frame when on metadata load.
Correction, WP4 does not work in Firefox, only OGG is supported. You must have tested in Firefox by removing both the WP4 and OGG sources. If you had left the OGG source it would have at least played using HTML5.
Video For Everybody (Video Encode section) states:
Firefox will only play Ogg (WebM is also supported in Firefox 4), and
it will not degrade to Flash if there is no Firefox-compatible video
file.
Therefore, an ogg source must be present in order for the flash fallback to work. You have to just trust that it works. This is just how the FireFox browser parses video elements - if it does not see an ogg source, then it will not reach the flash fallback and your fallback will appear to be broken.
If you need to test that the flash fallback works, you must remove the video and source tags around it so that the browser has no choice but to run the flash video.
I have this html5 code, with a MP4 for Chrome (working), an OGG for Firefox (failing) and the same ogg via a java applet for Internet Explorer (working):
<video width="848" height="480" controls="controls" autoplay="true" >
<source src="vernissage_cpal_2009.mp4" type="video/mp4" />
<source src="vernissage_cpal_2009.ogv" type="video/ogg" />
<applet code="com.fluendo.player.Cortado.class" archive="http://theora.org/cortado.jar" width="848" height="480">
<param name="url" value="vernissage_cpal_2009.ogv" />
</applet>
</video>
Firefox display a gray box with a X inside it. The file "vernissage_cpal_2009.ogv" also plays well inside normal media player, like VLC.
I had a similar issue, trying to embed ogg audio, where it was playing in FF, but not in chromium.
I found I was missing a tag, type audio/ogg. It now plays.
Here is the code:
<object width="300" height="42">
<param name="src" value="tonystheme.ogg">
<param name="type" value="audio/ogg">
<param name="autoplay" value="true">
<param name="controller" value="true">
<param name="bgcolor" value="#000000">
<embed src="tonystheme.ogg" autostart="true" loop="false" width="300" height="42"
controller="true" bgcolor="#000000"></embed>
</object>
Granted, this is not working with the new html5 code, but, it did make it so the file would play.
Use "video/ogg; codecs=theora,vorbis" as your mime type and Firefox will play it back happily.