I would like to have a file (ex. index.html) where i can use html5 for video.
I would like to access this file from my webbrowser locally. Without the need of a website.
I have tried using this on my pc locally, but it would not execute the html5.
I then have pushed it to my website which does have https:// and the videoplayer worked the way it was supposed to.
<video id="videoPlayer" src="a.mp3" autoplay autobuffer controls />
<script type="text/javascript">
var nextVideo = "b.mp3";
var videoPlayer = document.getElementById('videoPlayer');
videoPlayer.onended = function(){
videoPlayer.src = nextVideo;
}
</script>
This code will not have the html5 functions available.
I tried using this code with the chrome plugin pitch shifter without succes (local) while on my server it would work perfectly
I'd comment instead of answering but i am not allowed to.
The problem you encounter is not reproduceable in Chrome Version 61.0.3163.100 on Windows 10 - 64 bit. IE, edge, FF and chrome work with your code (but 2 mp4 files instead of your mp3's) locally for me.
What does the Console output of the F12 debug tools write when you attempt to load it locally?
Related
I ran into this peculiar problem that I couldn't get HTML5 video to loop on my local development environment (ASP.NET + IIS7). The video autoplays just fine. My code looks like this:
<video id="frontpage-video" autoplay loop>
<source src="http://test-site:8084/video_mp4.mp4" type="video/mp4">
<source src="http://test-site:8084/video_webm.webm" type="video/webm">
</video>
If I change video source URLs to some publicly available URLs (for example to dropbox), loop works just fine. This is not a major problem since I think (hope) it will work once my site goes live and the video is publicly available.
My question is: Can I make the video loop if my video is not publicly available?
I couldn't find similar problems by googling. Could it be some kind of IIS setting that prevents videos to loop?
Update 1: The problem seems to occur only in Chrome. Firefox and IE works fine.
Update 2: It seems that the video will stop at the end but never returns true for element.ended
> document.getElementById('frontpage-video').duration;
< 16.12
> document.getElementById('frontpage-video').currentTime;
< 16.12
> document.getElementById('frontpage-video').ended;
< false
Update 3: Problem is either in IIS or in Telerik's Sitefinity CMS. Server should send a "206 Partial Content" status but instead it sends 200 OK. Has any Sitefinity users had this problem and know how to solve it?
It looks like your problem is that you're not using HTTP Byte Serving. Your server is sending a "200 OK" response, but it should be sending "206 Partial Content" along with these headers:
Accept-Ranges:bytes
Content-Range:bytes 0-1492370/1492371
The byte range request allows the browser to request only the portions of the file that it needs. So if you seek around, it can skip right to that point.
With the regular 200 response, you will usually at least find that you can't seek in the video. But, depending on how your video file is encoded and where in the file the metadata is placed, you may see more problems. Sometimes the file might not even play at all. WebM is usually more robust than MP4, which can be all over the place.
I don't know IIS well enough to tell you how to configure it, but try starting here:
http://blogs.visigo.com/chriscoulson/easy-handling-of-http-range-requests-in-asp-net/
Chrome/Opera can't loop the video if the video itself is not served with HTTP 206 Partial Content response but 200 OK instead.
The problem is that Sitefinity's storage providers do not support partial content (version 7.0). They are planning to implement this for the future.
At the moment the possible workaround is to use an external blob storage provider such as Azure, Amazon or ExternalFileSystem (ExternalFileSystemStorageProvider).
I got this information from Sitefinity's support team.
May be MIME type in IIS is not set up for MP4.
Open IIS, and locate you default page. You'll see MIME type in right pane.
Click Add and put field1=.mp4 and field2=video/mp4.
Restart IIS.
Hope this might work.
In your question, your video-element doesn't have the id frontpage-video (but i guess it's copy paste?)
check if the video end event is called in your webkit browsers, and if so, restart your video.
.
<script type='text/javascript'>
document.getElementById('frontpage-video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
//restart your video
}
I'm aiming to have a sound occur when the user presses a certain button.
This is working on my desktop and in Chrome on my Android 4.4 phone but when I launch this as a cordova app the audio stops working.
<audio hidden='true' id='win-audio'>
<source src='audio.mp3' type='audio/mpeg' />
</audio>
with the following being called when a click event happens
document.querySelector('#win-audio').load();
document.querySelector('#win-audio').play();
I have tried using a <video> tag instead (with the same mp3 loaded). I've also tried the ogg format in case it's a codec issue but with no luck.
On PhoneGap people solve this using the Media plugin - I'd rather do this properly using HTML5 audio but if that's impossible, is there an equivalent for Mobile Chrome Apps?
After trying many solutions I discovered that we can use the Cordova media plugin to substitute for lack of HTML5 audio support.
First install the plugin from the command line from within your project directory using cca plugin add org.apache.cordova.media
Next add the following line to your config.xml file:
<plugin name="Media" value="org.apache.cordova.AudioHandler" />
You can then use the new Media object from within Javascript as follows:
var audio = new Media('/android_asset/www/path_to_your.mp3');
audio.play();
Note that you must issue the correct path that Cordova expects, which is NOT relative to the Javascript file the code is in. The above will work for Android, and to support iOS see: iOS Phonegap Media Object - How do I access a resource in the WWW folder?
I need to create mute/unmute sound in my app using WebRTC.
I created a function:
this.StreamSound = function(aStream)
{
mStream.getAudioTracks()[0].enabled = aStream
}
It works in FF but in chrome don't (aStream == false) :/
Any idea?
(I'm testing it by local "video" tag)
For a local stream, to mute on a local video, you should set the 'muted' property on the local video tag.
If using jQuery the code will be:
$('#localvideo').prop('muted',true);
For muting audio that is being sent on the PeerConnection to a remote browser the audio tracks enabled should work in both Firefox and Chrome.
I can't seem to get the audio element to work properly in Safari (v 5.1.2). I've tried moving the file to the same folder as the page, using both mp3 and mpeg MIME types, and changing filenames. It seems to work fine in all other browsers, but in Safari the audio element is created, but only shows that it is loading and will not play. Any ideas?
<audio controls preload="metadata">
<source src="audio/song.mp3" type="audio/mpeg" />
<source src="audio/song.ogg" type="audio/ogg" />
</audio>
Thanks
Does your website use an invalid HTTPS certificate or a HTTP Auth? I had this issue but found that Safari was having issues with either my invalid HTTPS cert or the Basic Auth (on the staging server).
Safari does not seem to load sounds reliably with preload="metadata".
You can try this in the console, of any webpage really:
var snd = document.createElement('audio'), src = document.createElement('source');
src.src = "http://www.largesound.com/ashborytour/sound/brobob.mp3";
src.type = "audio/mpeg";
snd.appendChild(src);
snd.preload = 'metadata';
snd.play();
It doesn't work. Then:
snd.preload = null; // equivalent to 'auto'
And voilà! It starts playing.
(I've filed this as rdar://problem/11481585, not that that helps any of us.)
Try installing apple quick time. I don't know about desktop versions but the IOS versions use quicktime to play sound from safari.
yes, an invalid HTTPS certificate or a HTTP Auth does not works on safari ( tested on customized safari browser on low end linux device ).
In order to make it work, please use valid https certificate.
I am using swfin to embed a swf object (video player) and it loads fine in all browsers, but in firefox it won't "start". I have to right click on the movie area and "start" is unchecked so I click on "start" and it will start just fine. Yet, in chrome and IE (haven't moved to a mac for testing yet) it fires up and starts just as I expected. I have tried swfobject instead of swfin and I have IE issues that I couldn't seem to correct. Hence moving to swfin. I saw a similiar problem like this using swfobject but I can't get it to replicate anymore.
Here is the swfin code:
`
var s = new swfIN("/Flash/video_player_playhead_overlays.swf", "flashMovie", "427", "280");
// s.hideSEO("div_seo");
s.addVar("video_file", "/DownloadableWork/Boardwalk.flv");
s.addVar("poster_file", "/Images/UploadedImages/Boardwalk.jpg");
s.addVar("clock_display", "yes");
s.addVar("playbtn_scale", "1");
s.addParam("play", "true");
s.addParam("loop", "true");
s.addParam("quality", "high");
s.addParam("scale", "showall");
s.addParam("wmode", "transparent");
s.addParam("menu", "true");
s.addParam("allowScriptAccess", "sameDomain");
s.write();
</script>
`
It's probably related to the video player swf itself rather than the http browser.
I would strongly recommend using swfobject, it's widely accepted as the industry standard for embedding swf content.
http://blog.deconcept.com/swfobject/
SWFObject is also recommended by Adobe.
http://www.adobe.com/devnet/flashplayer/articles/swfobject.html