I wrote this kod
In HTML part:
Audio src="/true.mp3"></audio
In script tag:
window.addEventListener("DOMContentLoaded", event => {
const audio = document.querySelector("audio");
audio.volume = 5;
audio.play();
});
I have an MP3 file. When I open the page, all codes run but this part is not.
It can be autoplayed without javascript.
Use <audio src="/true.mp3" autoplay></audio> to autoplay audio.
Other controls:
And you can also use controls to show controls, and loop to loop the audio.But user need to interact with the site.
Related
Is there any way to preload MP4/GIF background assets? Or is there a way to increase the website load time with MP4/GIF used as a background image?
So, the way that I do it:
Create another HTML document, name it something like video.html with contents something like this:
<video autoplay="" loop="" poster="bg.jpg" id="bgvid">
<source src="image/background.mp4" type="video/mp4">
</video>
(where bg.jpg is a screencap of the first frame of the video, and background.mp4 is the actual video)
In your main HTML, create a div with the id of background and leave it empty. In your CSS, give the div a background that is the same as the first frame of the video (screenshot it or something)
Next, use some Javascript (with JQuery) like this:
$(window).bind("load", function() {
$('#background').load('video.html');
});
I use flash player - flowplayer. and after using this player i need to remove it from my page. I use method unload(), but it does nothing. I tried to find question of this problem but find only this. But there are no aswers. Here we see that variable fp is steel exist
From looking at the flowplayer documentation on events for unload it states:
Unload: Unloads the player Flash component and replaces it with the original HTML content of the container element. This method does nothing if there was no HTML in the container.
Your example does not work because you have nothing within your container. Typically this is an image (splash screen). The user clicks on the image to start the video, the player is loaded. Unloading the player at the end then removes the player and replaces the image.
I have created a working demo here.
Example
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
id="player">
<!-- splash image inside the container -->
<img src="/media/img/home/flow_eye.jpg"
alt="Search engine friendly content" />
</a>
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
onFinish: function() {
this.unload();
}
});
I'm trying to make a feature where users type into a text box which produces suggestions as you type (like Google Instant), then those suggestions can be dragged into boxes on the page. It all worked fine until I discovered touch screen mobile devices don't work with HTML 5 drop and drag. I'm trying to get it work with jquery instead but it's not going smoothly.
The code below displays a draggable image and it works with touch screens and mice.
<script type='text/javascript' src='js/head.min.js'></script>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script>
head.js('https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js','js/ui.js','js/touch.js', function (){
$('#touchme1').draggable({revert:true});
$('#drop').droppable({
drop: function( event, ui ) {
$(ui.draggable).remove();
$(this).css({'border':'#777 dashed 3px','background':'#eee'});
},
over: function(event, ui) {
$(this).css({'border':'#a33 dashed 3px','background':'#faa'});
},
out: function (event, ui){
$(this).css({'border':'#777 dashed 3px','background':'#eee'});
}
});
});
</script>
<img src='itemimages/75.jpg' id='touchme1' class='touchBox'>
The problem is that when the same code is used within the php file which is called to display search results, the drag and drop doesn't work on mobile devices (but it does on desktops).
I have a feeling you may need to attach an event handler to the #touch1 element. The code you posted only looks for #touch1 elements that already exist in the DOM, but as your element is loaded though AJAX, it will not be in the DOM when the page first loads.
You can use .on() to attach an event handler to the object.
$(document).on('mouseover', '#touchme1', function(){
$(this).draggable({revert:true});
});
In the above example I am using the mouseover event. However you will need to choose an event hander that will work for you with both touch devices and with a mouse.
Example jsbin: http://jsbin.com/agisom/2/edit
I have an ogg vorbis file set up with the HTML5 <audio> tag.
The file is requested twice by Firefox (3.6.13), but with the 'autoplay' option both of the requested files play.
When I pause, one of the tracks stops but other continues. When I press play again then both tracks play, albeit out of sync now.
All works great with webkit and opera.
In Firefox without 'autoplay' the ogg file is requested twice but only one plays and all appears normal. But I need the 'autoplay' functionality in this scenario.
My html:
<audio autoplay controls">
<source src="/media/BetterDays.ogv" type="audio/ogg; codec=vorbis"></source>
<source src="/media/BetterDays.mp3" type="audio/mpeg"></source>
</audio>
My jQuery:
if(!!document.createElement('audio').canPlayType) {
audio = $('audio').get(0);
$(audio).removeAttr("controls");
$(audio).bind('play',function() {
$("#playtoggle").addClass('playing');
}).bind('pause ended', function() {
$("#playtoggle").removeClass('playing');
});
$("#playtoggle").click(function() {
if (audio.paused) { audio.play(); }
else { audio.pause(); }
});
I really appreciate any help one could offer. Thanks.
do it like this, html 5 tags are still a bit buggy, but GOOD ol' javascript will do the trick
<script>
give your audio tag an id, in my example it will be audiobox
function play() {
document.getElementById('audiobox').play();
}
play();
</script>
I am playing around with the HTML5 features, and I want div's (and similar containers like articles, sections, etc.) to be draggable. Consider the following code:
<!DOCTYPE html>
<html>
<head>
<title>A Simple Draggable Object</title>
</head>
<body>
<h1>Test #1: A Simple Draggable Object</h1>
<div draggable="true">This text should be draggable.</div>
</body>
</html>
I tested in OS X the following browsers:
In Chrome 7.0 and Safari 5.0.2 I can successfully drag the text around, but in Firefox 3.6 and 4.0b6 I can neither drag the text nor mark it (as if it was usual text). Is this a bug or a feature?
How do I achieve that Firefox lets me drag around these tags without using jQuery ?
According to HTML5 Doctor, this won't work in Firefox without some JS help.
The HTML 5 spec says it should be as
simple as adding the following
attributes to the markup of the
elements in question:
draggable="true"
However, this doesn’t work completely
for Safari or Firefox. For Safari you
need to add the following style to the
element:
[draggable=true] {
-khtml-user-drag: element;
}
This will start working in Safari, and
as you drag it will set a default,
empty value with the dataTransfer
object. However, Firefox won’t allow
you to drag the element unless you
manually set some data to go with it.
To solve this, we need a dragstart
event handler, and we’ll give it some
data to be dragged around with:
var dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(dragItems[i], 'dragstart', function (event) {
// store the ID of the element, and collect it on the drop later on
event.dataTransfer.setData('Text', this.id);
});
}