Is it possible if we modify the interface of the wowza player? like adding some elements like image or some real time interaction such as texts from chat system
Based on https://www.wowza.com/docs/getting-started-with-wowza-player#create-a-custom-wowza-player-with-wowza-player-builder, there are a small set of features that be customized by modifying the embedded <script> tag.
Regarding image addition, you can add images at the beginning and end of a video via the posterFrameURL and endPosterFrameURL keys.
Regarding text addition, you can also add a title and description (via similarly named keys), but there's nothing out-of-the-box for realtime text addition/insertion.
Related
I have several tooltips that surface an animation on hover. At first we used Gifs but our team decided to replace the gifs with .mp4 files. These are animations that show examples of how to use a given option. They have no sound.
But now I'm unable to find the proper way to add accessibility for screenreaders. Apparently you can't use alt text on video elements. title is not meant for accessibility. I understand there is a track element you're supposed to add for captions. But We don't want visible captions on these video animations. We just want alt text that explains that there's an animation showing an example of how to use the selected option.
There is, not yet, a proper way to do this natively. I've found this other post on SO about controlling <track> with CSS. So including but hiding it won't do the trick.
You could create a transcript of your animation and include it below the video, hidden or shown in view. Like this example does. Audio transcript example.
What you also could do is build your own tooltip. One which is shown when hovering the video and uses the WAI-ARIA role="tooltip" and aria-hidden attributes to show that its a tooltip and if it is visible. Inside these tooltips you can place whatever text you want about the video. Just make sure that the aria-hidden attribute is false when hovering and true when not.
<span role="tooltip" aria-hidden="false">Your tooltip content</span>
Check these examples on how to create accessible tooltips.
Aria Tooltip Example
Tooltips simulated using ARIA
video elements can't have the tooltip role so you should enclose the element in a div with this role. Then, as this role does require a name and has no accessible content, use aria-label with your accessible alternative:
<div role="tooltip" aria-label="Your accessible description goes here">
<video />
</div>
If you're set against using captions, you may want to consider the following options:
Create a text document that tells the same story and presents the same information as the prerecorded video-only content
Provide an audio track describing the information in the video
In either case, it would make sense that the alternative format (i.e. text or audio) would be placed near the video on the page.
You can use the longdesc attribute in the video tag, which contains an URL/link to a text file with a description of the animation.
Add captions, it isn't about what you want it is about what you users need / expect.
Non-impaired users will not see the captions anyway as they are off by default but can switch them on If They Want (if this isn't the case you need a different video player).
If you start with [SILENT VIDEO - captions explain steps] then your deaf users can switch off the instructions If They Want
Blind users will thank you for providing captions as they can then find out what the video contains (as this is an instructional video you may find that a separate set of instructions may work better to describe the steps in detail)
TL; DR - use captions in production - there is no reason not to use captions in a production environment, several reasons to use them.
EDIT / ADDITIONAL
If you really want to make sure your video has no subtitles by default the following JS will disable all of them by default.
for (var i = 0; i < video.textTracks.length; i++) {
video.textTracks[i].mode = 'hidden';
}
I'm using jplayer on my website but I have only one player on top which plays each mp3 on the page (like deezer). That's why I'm using demo04, as I want to display the current song playing and I want to add mp3 on the fly (maybe is it possible in an other way?).
I can add music to the player with a simple link, for example :
The Separation
So my problem is coming from the demo which doesn't prevent downloading tracks (right click>save target as) and I need this functionality.
In a few words, is it possible to hide the href or crypt it?
No this is not possible.
You can encrypt the name, but an encryption always has a decryption.
Also if you look at search result of Google you will find:
How to prevent downloading images and video files from my website?
No, it's not possible.
You can make it hard for users. But you can't stop it.
I have to create a web page which can be set to full screen(I mean the real full screen,not like press the F11),in the full screen there should be some words displaying.
Take the http://stackoverflow.com for example:
Normally,it show its contents(the questions),but someday,maybe a VIP come to visit the page,so we want to replace the whole page with a welcome screen.
Of course we can replace the https://stackoverflow.com/index.html (suppose it is the index page) with the welcome text(welcome xxx to our site...) in the server side.
However this is not convenient,and the text can not be full screened.
So I thought the flash,I can add a controller button at the page,when required,I click this button,and set the welcome words,then a flash will start to play with the sepcified words in a full screen model. It would be better if the flash can show the text with a Animation.
I have never did the flash development,so I want to know if this is possible?
BTW,can all the clients change to flash with juse one click?
I mean I click the controller button,then all the client who is visit this page should see the contents replaced by the flash at the same time.
I am not sure if you guys know what I am meaning. If not,I can update more details.
I am really Anxious, Thanks. :)
Since you're starting from scratch with Flash, I made a quick example of what I think you want to do. http://clearmpls.com/temp/fullscreen/ - the source files that I made this example with can be grabbed from here: http://clearmpls.com/temp/xml-loading-fullscreen-thing.zip
I used the Flash IDE to create this. You can grab a 60-day trial from Adobe's site here: https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash
This example shows examples of these functions:
- it loads an XML file with text data
- displays that data in a textfield on the stage
- gives you a button where you can toggle back and forth between fullscreen and regular
- resizes the stage and textfield based on what you have written in your XML file
Can anyone help me create a javascript/jquery function to control the HTML5 audio tag control seekbar?? (Or suggest me a web resource from where I can learn).
I want to customize the looks of the default controls and so I want to handle the progress in a different <div>. How can I achieve that?
Use any JavaScript slider control that you want and do two things:
listen for changes (clicks) and set audioNode.currentTime
conversely, periodically set the slider's value to audioNode.currentTime
Working with the <audio> tag in some web development I've been doing lately, and one thing I'm trying to do is use it to build a word list and provide a pronunciation sample next to each word on the list. Setting this up isn't hard at all, however this sort of application hardly requires the full set of controls; just a play button.
The controls element of the <audio> tag doesn't seem to be that well documented at all, however; all I can find on it is "always put 'on' here, unless you want to build your own player". I don't want to build my own player, however, I just want a simple, 1-button play interface with nothing else, ideally without requiring JavaScript or Flash.
It's fairly simple. You just need to call the play method on the audio DOM object when something is clicked. The something could be an image, text, link, or whatever suits.
Here's one possible way:
<a onclick="this.firstChild.play()"><audio src=".."></audio></a>
See an example