At the moment I am using sounds on my website using an old technique with embedded tags and javascript . I want to convert these to HTML5, but I am unsuccessful doing this.
This is the code I have at the moment:
HTML:
<div class="au">
<embed src="audio/tileSelect.wav" autostart="false" width="1" height="1" hidden="true" id="sound1" enablejavascript="true">
<embed src="audio/tileRemove.wav" autostart="false" width="1" height="1" hidden="true" id="sound2" enablejavascript="true">
</div>
JS:
//Sounds
function playSound(soundobj) {
if (document.getElementById('sound').checked) { //if this checkbox is checked, play sounds
var thissound=document.getElementById(soundobj);
thissound.Play();
}
}
JS used in other functions to trigger the sounds:
playSound('sound1');
playSound('sound2');
So all the above works. Now to convert this to HTML5. The HTML part is easy, I think it should look like this:
HTML5:
<!--HTML5 audio-->
<audio id="sound1" preload="auto">
<source src="audio/tileSelect.wav" type="audio/wav" />
</audio>
<audio id="sound2" preload="auto">
<source src="audio/tileRemove.wav" type="audio/wav" />
</audio>
But for the JS part I am kinda stuck. Anyone has an idea about this? Tried to change soundobj to soundid, but had no luck with that.
Many thanks,
Maurice
There are two issues with the code you have posted.
First one would be the markup that should probably read like this instead:
<audio id="sound1" src="audio/tileSelect.wav" preload="auto"></audio>
<audio id="sound2" src="audio/tileRemove.wav" preload="auto"></audio>
The <video>-like source notation that you used is not documented anywhere (although I have to admit that it does not feel wrong - but then again I have never used HTML5 audio yet), see MDN documentation
EDIT: Apparently it's ok to use source elements inside audio elements:
Permitted content: Transparent content, containing either a src
attribute or one or more elements, followed by either flow
content or phrasing content , with no or elements.
See: https://developer.mozilla.org/en/HTML/Element/audio
Still you don't really need it in your case as you just have one source file.
Second issue would be that you are using a non-existent method of .Play() (capital P), that should be called .play(). So your JS should look like:
function playSound(soundobj) {
if (document.getElementById('sound').checked){
document.getElementById(soundobj).play();
}
}
playSound('sound2'); //should play 'audio/tileRemove.wav'
Related
Goal:
I am trying to implement a control with as little code clutter as possible that will allow the change of quality of a video.
Preferences:
The following is what I am given, and I would rather work around it. I am open to using pre-built plugins or a javascript/jquery hack, but would rather not go for a solution that involves reinventing (me or you) the wheel (require the building of a custom video control scheme), but would take it as a last result.
EDIT:
Sorry. Did not mean to have that correlation, as the urls did not reflect any sort of pattern. I oversimplified it, not assuming people would look at the urls for a pattern. But thank you for that start, as I can probably work with that. Sorry again. I will change the urls to not have any pattern.
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
Thank you in advance for anybody who can give some insight.
Sorry for asking. Turns out I was able to solve it pretty much all by myself. Hate those moments. Here is the solution I came up with, which just involves copying the <source> I need based on the label attribute, deleting it, and prepending it into the <video> element:
HTML
<div class='vidcontainer'>
<select class='qualitypick' autocomplete='off'>
<option selected>fullHD</option>
<option>720p</option>
<option>360p</option>
</select>
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
</div>
JQUERY
$(document).ready(function(){
$('.qualitypick').change(function(){
//Have several videos in file, so have to navigate directly
video = $(this).parent().find("video");
//Need access to DOM element for some functionality
videoDOM = video.get(0);
curtime = videoDOM.currentTime; //Get Current Time of Video
source = video.find("source[label=" + $(this).textContent + "]"); //Copy Source
source.remove(); //Remove the source from select
video.prepend(source); //Prepend source on top of options
video.load(); //Reload Video
videoDOM.currentTime = curtime; //Continue from video's stop
videoDOM.play(); //Resume video
})
})
Although this was not my intention, I hope my answer is of some use. Sorry again for asking before thinking it through.
You don't need many source tags. One is enough, however, you need to change the value of the source attribute, which is src.
var map={'fullHD':'1080p','720p':'720p','360p':'360p'};
function changeQ(quality){
$('source','video#player').attr('src','http://v.com/'+map[quality]);
$('span#pp').html(map[quality]);
console.log($('source','video#player').attr('src'))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Quality
(<span id="pp"></span>)</button>
<ul class="dropdown-menu">
<li>FullHD</li>
<li>720p</li>
<li>360p</li>
</ul>
</div>
<video id="player" width="400" controls>
<source src="http://v.com/1080p" type="video/mp4">
</video>
I have a video in which I want to disable fullscreen playing with html5 video tag in iPhone,
I tried different solution as suggested in StackOverflow but none seemed to solve the problem.
Here is my solution by adding playisinline=1
<video id="orange-video-1" class="videotag active" preload="auto" playsinline=1 webkit-playsinline=1 src="emptyvideo/emptyvideo.mp4" muted>
</video>
what do I need to change to get what I want?
Actually you don't need to set it to equal one. playsinline should work.
Try this instead:
<video id="orange-video-1" class="videotag active" preload="auto" webkit-playsinline playsinline src="emptyvideo/emptyvideo.mp4" muted>
</video>
Doing it from a jQuery view would also work:
// Sets the attribute, empty second parameter needed
// otherwise it would be a getter func
$('video').attr('webkit-playsinline', '');
$('video').attr('playsinline', '');
// Set the webview on iOS
webview.allowsInlineMediaPlayback = true;
If that doesn't work:
Reading Apple's documentation it appears you would use the following code since playisinline=1 works if the website is stored on the home page. Try this in your config file:
<preference name="AllowInlineMediaPlayback" value="true" />
I have a problem with getting sound to play and pause within my JS and HTML code.
I have a function that takes the two tracks inputted, pauses one, and plays another, for use to create dynamic music based on where the user is or what it is doing. However when the function is called, neither track is played or paused. I've looked up online to make sure that I'm using the proper audio formatting and from my research I have been. I'm currently stumped as to why this isn't working so a fresh set of eyes may help to figure out the problem.
My Javascript:
function playTrack(musicon, musicoff) {
document.getElementById(musicon).play();
document.getElementById(musicoff).pause();
}
My HTML
<audio id="themeD" autoplay="autoplay" loop="true">
<source src="d.ogg" type="audio/ogg" />
<source src="d.mp3" type="audio/mpeg" />
</audio>
<audio id="themeE" loop="true">
<source src="e.ogg" type="audio/ogg" />
<source src="e.mp3" type="audio/mpeg" />
</audio>
<a class="button" onclick="javascript:playTrack('ThemeE','ThemeD');">Change audio</a>
Somewhat of a beginner with Javascript and definitely a noob with audio elements so any and all help or tips would be appreciated.
Watch your spaces. You play the audio with the id Theme E, but the id of your audio is themeE
I am trying to change videos dynamically in my web page using JavaScript. The first video (.mp4 format) file is playing well, but when I click the button to change the video, it is showing some black screen instead of playing next video.
I tried in many ways to solve this issue by reading many Stack Overflow articles, but it is still not working.
Could anyone please guide me to solve this issue?
My JavaScript code:
function vidSwap() {
var player = document.getElementById("player");
player.pause();
document.getElementById("webm").src = "D:\movies\Telugu\movie2.webm";
document.getElementById("mp4").src = "D:\movies\Telugu\movie2.mp4";
document.getElementById("ogg_src").src = "D:\movies\Telugu\movie2.ogg";
player.load();
player.play();
}
My HTML Code:
<video id="player" height="380" width="440" controls>
<source id="webm" src="D:\movies\Telugu\movie1.webm" type="video/webm" />
<source id="mp4" src="D:\movies\Telugu\movie1.mp4" type="video/mp4" />
<source id="ogg_src" src="D:\movies\Telugu\movie1.ogg" type="video/ogg" />
</video>
<br>
<br>
<input type="button" value="Next Video Clip" onclick="vidSwap()" />
Your problem is in the vidSwap function: When you're setting the src attribute of each of the elements, the backslashes in the strings you're using are being interpreted as escaped characters.
document.getElementById("webm").src = "D:\movies\Telugu\movie2.webm";
// ^^ ^^ ^^
You need to escape the backslash characters by adding an extra backslash before each (\\), like so:
document.getElementById("webm").src = "D:\\movies\\Telugu\\movie2.webm";
// Repeat for each string
Happy coding!
I've got a gallery of sorts with 10 or so thumbnails that each represent one song. To control the playback of each, I've set a play button to fades in via jQuery. After some digging around Apple's Dev Center I found some native JavaScript to control audio. It works beautifully, but is written for control of one object at a time. What I'd like to do is rewrite it as one function that dynamically controls the playback/pause of the thumbnail you're selecting.
Below is the code that I found.. works, but it'd be a lot of unnecessary code to write it 10 times.
Thanks for your help and advice, always!
HTML:
<div class="thumbnail" id="paparazzixxx">
<a href="javascript:playPause();">
<img id="play" src="../images/icons/35.png" />
</a>
<audio id="paparazzi">
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
JavaScript:
<script type="text/javascript">
function playPause() {
var song = document.getElementsByTagName('audio')[0];
if (song.paused)
song.play();
else
song.pause();
}
</script>
jQuery is awesome for this sort of thing. It gives you the ability to easily manipulate elements based on their relationship to other elements in the DOM tree. In your example you want to be able to make the <a> elements only affect the <audio> elements that are right next to them when clicked.
The problem with your current Javascript code is that it is actually just grabbing only the first audio element on the entire page.
Here's how you can change your code to support an unlimited number of <a> & <audio> pairs.
Add a class to the <a> tag ('playback' in my example)
Replace the href attribute with a '#'
Then use jQuery to attach a handler to the click event for elements with that class.
HTML
<div class="thumbnail" id="paparazzixxx">
<a class="playback" href="#">
<img id="play" src="../images/icons/35.png" />
</a>
<audio id="paparazzi">
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
Javascript
<script type="text/javascript">
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
// This next line will get the audio element
// that is adjacent to the link that was clicked.
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
else
song.pause();
});
});
</script>