The maximum width for the player is 800px wide. You can write something yourself, or use something like this: jPlayer. The workaround is to not use the browser controls and use some of your own, you can do this with javascript. No idea about cross browser compatibility, but it seems to work fine in Chrome and iOS. The audio tag with the 'controls' attribute uses the browsers default player, which you cannot style. The result looks like this in Chrome (Moodle 3.2): This might be a good candidate for the Generico filter to make repeated use easier.Ĭopy and paste the CSS from the following site to make the slider look nice: Change max="1.5" to max="2" if you want the maximum playback rate to be 2x the original speed. You can change the values after "input" to whatever you'd like. aybackRate = document.querySelector('#playbackrate').value Ĭopy the code above into a Moodle page, replace the audio link (or insert one), and you're good to go. MyAudio = document.getElementById("audio1") After done linking all the files lets create the first thing. There are a lot of -webkit-based psuedo elements that you can target for styling but those only work on webkit based browsers (eg: This wont work on Firefox/IE/Edge). Otherwise well not be able to access the data. Unfortunately not in a cross browser solution as they are built natively. Remember to add data.js file before app.js. Putting 2 and 2 together, I did this (ignore all the inline styling if you want):ĭocument.querySelector('#playbackrate').value = speedDisplay Open index.html and inside that start by writing basic HTML structure. Then I read about the HTML5 range slider here: Standard CSS and HTML for any other purposes (using the 'export' features in the logo menu. Use Skin Machine to create: - Wimpy Player Skins. Skin Machine itself is based on pure HTML5, Javascript and CSS, so what you see is truely what you get. However the native controls are a little lacking in style. I first came across this post that showed how to set up a 3-button audio speed changer: Use Skin Machine to design a player without compromises. HTML5 introduces the audio element which offers a way to play audio natively in the browser. ![]() (I don't know if this is old news for people, but I just became aware of the HTML5 range slider yesterday and think it's pretty useful.) It is not perfect, and testing of the configuration options is not available without changing and uploading the new page.Below is a bit of script that allows the user to finely control audio playback speed using the HTML5 range slider. ![]() The development tester used to test the operation of different jPlayer methods. The supplied media formats are WebMv, OGV and M4V.ĭemo variants: jPlayer's Development Tester ![]() This demo will use the HTML solution if it can, otherwise the Flash fallback solution will be used. You can easily customise the way it looks and make it fit your pages colours and style. In this demo jPlayer is combined with HTML and CSS to create a video player. JPlayer 2.9.2 Demos jPlayer as a video player The following code, when pasted into Chrome's developer console, reveals a document fragment that describes the audio element's structure: var aud document.createElement ('audio') document.querySelector ('body').appendChild (aud) aud.controls true Going to the chrome debugger's elements tab reveals this document.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |