For some context, I have a series of panorama images and each image has a different audio file (mp3) associated with it. I'm trying to play the relevant audio src when the panorama image changes, however I can't seem to disconnect the previous audio src.
<a-assets>
<audio
id="vr-audio"
src={`http://res.cloudinary.com/concept3d/video/upload/audio_files/${trackId}`}
preload="auto"
/>
</a-assets>
{Boolean(tracks.length) && <a-entity sound="src: #vr-audio" />}
The interpolated trackId is changed when the panorama changes and pulled from my components state. I can see the audio src url is changing as expected but when I query for the sound entity the sound src does not update to the new url.
Any advice is appreciated.
Don't change the audio element in place, the component won't catch that. Change the sound component's src property instead. It can take a URL. <a-assets> isn't really needed unless for preloading.
soundEl.setAttribute('sound', 'src', 'http://res.cloudinary.com/concept3d/video/upload/audio_files/${trackId}');
If you want to control the audio element, then create a new audio element and assign the new ID.
Related
I have an HTML audio element that plays a linked .mp3 file upon click:
<audio id="yourAudio" preload="none" onplay="playing(this);" onended="stopped(this);">
<source src="/sandboxassets/pronunciations/esdar1e007.mp3" type="audio/mpeg">
</audio>
I don't want to display the direct link to the audio file (/sandboxassets/pronunciations/esdar1e007.mp3) in the HTML source. Is there any way to obfuscate it? I know we can use base64 encoding to obfuscate image links turning them into data URIs but I don't know how to do the same with mp3 files, if at all that's possible. Also, will that be a wise move compatibility-wise?
Addition: For what it's worth, there could be up to 5 such audio elements on my page and each such element loads an mp3 of size between 8kB and 20kB. I am assuming this scenario should justify a higher file size vs. fewer HTTP requests tradeoff. But please correct me if I'm wrong.
Yes, you can use data URIs to do this. Just put the data URI in your src value. For example:
<audio controls src="data:audio/ogg;base64,XXXXXX....." />
See this page for a working example
I was wondering if someone had already tried to make his own simple DASH player(and maybe has some examples/source codes) but without using dash.js repository on GITHUB , and if possible has any insights and tips on how to start with the creation/writing process?
Take a look at Building a simple MPEG-DASH streaming player:
Like described on this site following this steps should give you an idea:
Define an HTML5 video element in the HTML section of a page.
Create a MediaSource object in JavaScript.
Create a virtual URL using createObjectURL with the MediaSource object as the source.
Assign the virtual URL to the video element's src property.
Create a SourceBuffer using addSourceBuffer, with the mime type of the video you're adding.
Get the video initialization segment from the media file online and add it to the SourceBuffer with appendBuffer.
Get the segments of video data from the media file, append them to the SourceBuffer with appendBuffer.
Call the play method on the video element.
Repeat step 7 until done.
Clean up.
I know this is ridiculous, but I'm learning...
In a Chrome application I let my sender initiate and load a Custom receiver.
The receiver page includes a video element set to play one specific video, like this:
<video autoplay>
<source src="../media/someVideo.mp4" type="video/mp4">
</video>
The receiver page and the media file are hosted on a web server (SP)
I use no further communication between sender and receiver, so the receiver just loads and plays the video.
It works beautifully, but the video size on the device (TV) is too big. It fills the screen, but I don't see the full picture.
I try to downsize the video using CSS or by setting the width and height parameters on the video element, but the result is the same. Why doesn't ChromeCast respect these settings?
width/height for the video element should work. As a test, just set width and height in the element itself and test. On a tv screen, in general, there is a notion of overscan and most modern tv sets have a setting to adjust that, you might want to check to see if your tv offers that too or not.
I want to play a video file from my web app. I use JSF. I want to know how we can open the video file with the help of any video player installed in the client's system. I know how to open a pdf file the same way. But I want to know how to open a video file.
There's no standard JSF component for this. It's however not different from as you would do in plain HTML. Just drop the video file in public webcontent (so that it's reachable by an URL) and use the HTML <embed> and/or the <object> element which points to the URL of the video file. That's basically all. Note that you can just use EL in template text. So e.g. <embed src="#{bean.videoURL}"> would work perfectly fine, as long as it generates the HTML code the way you intend (open page in browser, rightclick and View Source to see it).
The way how to create and parameterize the HTML <embed> or <object> tag in turn depends on the video format (MPEG, MOV, FLV, etc). You basically need to consult the documentation of the video format vendor for details how to use it. Since you didn't mention what format the video file is in, we can't help you further in detail. Googling the smart way should however yield sufficient examples. E.g. "embed mpeg in html".
PrimeFaces has however a <p:media> component which makes it all easier for developers who are lazy in Googling for examples and/or figuring the browser specific inconsitenties ;) It'll outright generate the right HTML code necessary for the provided video format.
See also:
How to stream audio/video files such as MP3, MP4, AVI, etc using a Servlet
This works in browsers those support HTML5.
<video controls="controls">
<source src="resources/myVideo.mp4" type="video/mp4"/>
</video>
I'm trying to create a mobile ready audio player. However, I'm wondering if it's possible to "mask" the src so that a user couldn't view source and download the mp3. I'm definitely a n00b, so any simple direction would be extremely helpful (IE - use 'x' to do 'y'). I don't necessarily need code examples. Thanks!
Current:
<audio src="unreleased_track01mp3">
...
</audio>
What I'd like:
<audio src="01238134781239871">
...
</audio>
No.
You could attempt to stream the audio, but if you want to play a specific file, the user will always be able to download it if the user is able to listen to it.