I'm trying to track when a user presses the play button on an audio element on a page using knockout. Each page has lots of audio elements and I want to log when a user plays one and save it to the server. My issue is, I can bind an click event to the entire audio element but I'm not sure how to bind it to just the play button. I tried using the html5 events directly but had trouble with calling the knockout code.
<audio
controls="controls" preload="none"
data-bind="click: $root.audioClicked"
type="audio/mp3">
</audio>
Any help appreciated.
For anyone else who's looking at this. I realised that I needed to use the event binding:
<audio
controls="controls" preload="none"
data-bind="attr: { src: $data.Url }, event: { play: $root.audioClicked }"
type="audio/mp3">
</audio>
Related
I'm testing an EPUB with audio file, fixed layout format, in an 2012 iPad 2. I want to the audio file "autoplays" in one specific page with some text on it. After some tests, I've get some answers:
1.- Autoplay DOES work, when in the package.opf I set the values "landscape", "portrait", "both" and "auto" in the "rendition:spread" property; which create a synthetic spread for rendering the content (which, is when the system creates two adjacent pages simultaneously on the device screen).
2.- Autoplay DOESN'T work when I set the value "none", which is what I want to use in the mentioned property in the previous point (I don't want to use a "synthetic spread" in my design).
This is the code i'm trying in the xhtml file, the sound part:
<audio autoplay="autoplay" loop="loop">
<source src="../audio/latidos.ogg" type="audio/ogg" />
<source src="../audio/latidos.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
and this is the "meta" part about spread and layout of the book design in the package.opf file:
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:spread">none</meta>
Any comments about this issue? Perhaps the model of my iPad?
Is it possible to embed an html5 version of a youtube video without using an iframe?
Here is a example of embedding without an iFrame:
<div style="width: 560px; height: 315px; float: none; clear: both; margin: 2px auto;">
<embed
src="https://www.youtube.com/embed/J---aiyznGQ?autohide=1&autoplay=1"
wmode="transparent"
type="video/mp4"
width="100%" height="100%"
allow="autoplay; encrypted-media; picture-in-picture"
allowfullscreen
title="Keyboard Cat"
>
</div>
compare to regular iframe "embed" code from YouTube:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/J---aiyznGQ?autoplay=1"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
and as far as HTML5 goes, use <object> tag like so (corrected):
<object
style="width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;"
data="http://www.youtube.com/embed/J---aiyznGQ?autoplay=1">
</object>
Yes. Youtube API is the best resource for this.
There are 3 way to embed a video:
IFrame embeds using <iframe> tags
IFrame embeds using the IFrame Player API
AS3 (and AS2*) object embeds DEPRECATED
I think you are looking for the second one of them:
IFrame embeds using the IFrame Player API
The HTML and JavaScript code below shows a simple example that inserts a YouTube player into the page element that has an id value of ytplayer. The onYouTubePlayerAPIReady() function specified here is called automatically when the IFrame Player API code has loaded. This code does not define any player parameters and also does not define other event handlers.
<div id="ytplayer"></div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE'
});
}
</script>
Here are some instructions where you may take a look when starting using the API.
An embed example without using iframe is to use <object> tag:
<object width="640" height="360">
<param name="movie" value="http://www.youtube.com/embed/yt-video-id?html5=1&rel=0&hl=en_US&version=3"/
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed width="640" height="360" src="http://www.youtube.com/embed/yt-video-id?html5=1&rel=0&hl=en_US&version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>
(replace yt-video-id with your video id)
JSFIDDLE
Because of the GDPR it makes no sense to use the iframe, you should rather use the object tag with the embed tag and also use the embed link.
<object width="100%" height="333">
<param name="movie" value="https://www.youtube-nocookie.com/embed/Sdg0ef2PpBw">
<embed src="https://www.youtube-nocookie.com/embed/Sdg0ef2PpBw" width="100%" height="333">
</object>
You should also activate the extended data protection mode function to receive the no cookie url.
type="application/x-shockwave-flash"
flash does not have to be used
Nocookie, however, means that data is still being transmitted, namely the thumbnail that is loaded from YouTube. But at least data is no longer passed on to advertising networks (as example DoubleClick). And no user data is stored on your website by youtube.
Yes, but it depends on what you mean by 'embed'; as far as I can tell after reading through the docs, it seems like you have a couple of options if you want to get around using the iframe API. You can use the javascript and flash API's (https://developers.google.com/youtube/player_parameters) to embed a player, but that involves creating Flash objects in your code (something I personally avoid, but not necessarily something that you have to). Below are some helpful sections from the dev docs for the Youtube API.
If you really want to get around all these methods and include video without any sort of iframe, then your best bet might be creating an HTML5 video player/app that can connect to the Youtube Data API (https://developers.google.com/youtube/v3/). I'm not sure what the extent of your needs are, but this would be the way to go if you really want to get around using any iframes or flash objects.
Hope this helps!
Useful:
(https://developers.google.com/youtube/player_parameters)
IFrame embeds using the IFrame Player API
Follow the IFrame Player API instructions to insert a video player in your web page or application after the Player API's JavaScript code has loaded. The second parameter in the constructor for the video player is an object that specifies player options. Within that object, the playerVars property identifies player parameters.
The HTML and JavaScript code below shows a simple example that inserts a YouTube player into the page element that has an id value of ytplayer. The onYouTubePlayerAPIReady() function specified here is called automatically when the IFrame Player API code has loaded. This code does not define any player parameters and also does not define other event handlers.
...
IFrame embeds using tags
Define an tag in your application in which the src URL specifies the content that the player will load as well as any other player parameters you want to set. The tag's height and width parameters specify the dimensions of the player.
If you are creating the element yourself (rather than using the IFrame Player API to create it), you can append player parameters directly to the end of the URL. The URL has the following format:
...
AS3 object embeds
Object embeds use an tag to specify the player's dimensions and parameters. The sample code below demonstrates how to use an object embed to load an AS3 player that automatically plays the same video as the previous two examples.
Use the object tag:
<object data="http://iamawesome.com" type="text/html" width="200" height="200">
access the page directly
</object>
Ref: http://debug.ga/embedding-external-pages-without-iframes/
I'm trying to find a tag/code that allows me to play background music when a webpage is launched or executed, is there any that is compatible with Google Chrome and if there are any, which codes work with chrome?
<!DOCTYPE html PUBLIC "-//w3c//DTD HTML 4.01 Transitional//EN"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My First Web Application</title>
</head>
<body>
<bgsound src="music/sample.mp3">
<noembed><img src="images/download.jpg" ></noembed>
</bgsound>
Fur Elise
</body>
</html>
The <bgsound> tag is Internet Explorer-specific and will thus not work in other browsers such as FireFox or Chrome. The <embed> tag should work in FireFox and Chrome if you use it correctly. It will use a browser plug-in to play the sound. Below is an example:
<embed loop="true" src="music/sample.mp3" hidden="true" type="video/quicktime"></embed>
loop="true" specifies to play the sound repeatedly.
src="sample.mp3" specifies the relative path of the sound file to play. The variety of formats you can play depends on what type= you specify.
hidden="true" indicates to not show the media player's interface. Hide it if you want the user to not be able to pause, stop, or navigate through the sound.
type="video/quicktime" specifies to use a Quicktime component, which means the client must have Quicktime installed. Use application/x-mplayer2 for Windows Media Player or audio/x-pn-realaudio-plugin for Real Player audio. Quicktime plays more formats and is probably what you will want to use.
Alternatively, use <object> in a very similar way. An example is below:
<object data="music/sample.mp3" type="video/quicktime" width="0" height="0">
<param name="mp3" value="music/sample.mp3">
<param name="autostart" value="1">
<param name="playcount" value="true">
</object>
The embedding method places a media player in your page. Here's the most basic version of the code:
<audio controls="controls"><source src="music/sample.mp3" type="audio/mpeg" /></audio>
If you would prefer not to show the player (and give the user no control), use this code:
<audio><source src="music/sample.mp3" type="audio/mpeg" /></audio>
Is there a way to specify the poster or get the preview image of the video from the azure media player as mentioned on this page
http://amsplayer.azurewebsites.net/azuremediaplayer.html
Thanks for any help.
Use the "poster" attribute on the video tag.
For example:
<video id="azuremediaplayer" poster="~/Content/img/preview.png" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls width="640" height="480" data-setup='{"logo": { "enabled": false}, "nativeControlsForTouch": false}' tabindex="0">
<source src="{video_src}" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
If you don't specify a value for the poster attribute then the player will use the first frame of the source video as the poster.
I'm trying to use HTML radio buttons in my Spotify app.
When the Inspector tool is used, the code for radio button is present there, but the radio button is not getting rendered in the browser inside the Spotify client. I am also getting the same result for the checkbox.
The same code is used with normal browsers like IE, Mozilla, or Chrome and the radio button gets rendered without any trouble.
Can anybody tell me why the radio button is not getting rendered in the sandboxed browser inside the Spotify client?
Thanks,
When looking at the radio button in the inspector, you can see that the input tag is getting the -webkit-appearance:none attribute set in the sp://import/css/shared.css and sp://import/css/reset.css files.
button, input, textarea {
-webkit-appearance: none;
font-family: inherit;
font-size: 12px;
}
The sp://import/css/adam.css and sp://import/css/eve.css files import the sp://import/css/shared.css file, which is how you are probably getting that attribute. The behavior only exists for the radio and checkbox types because the other input types are overridden elsewhere.
Tip: If you view the css attributes in the inspector, you can actually check them to remove or re-add the style.
Solution:
<input type="radio" style="-webkit-appearance:radio" />
<input type="checkbox" style="-webkit-appearance:checkbox" />
Be warned: It may have been the intention of the developers to not show radio/checkbox buttons, so your app may have approval issues because of the UI guidelines.
Regards,
Kevin
This post says it's a bug:
Spotify - Using Checkbox UI elements
(didn't check on spotify api doc tought...)