I am fairly new to js and html. I am building my own Video Portfolio Website.
I have multiple videos and update their src, depending on which video is clicked.
I use the video.js player to play my m3u8 and mpd files.
The problem is that, for some reason video.js can't update the src of the video and fails to play any video at all.
[You can download my website here]
I've been trying to solve this problem for a couple weeks now, but couldn't manage to do so.
I hope someone here can help!
Thanks in advance!!
When you're using Video.js (or any comparable player) you shouldn't try to directly interact with the underlying <video> or <source> elements, you need to use Video.js's API.
Loading a new video is accomplished by passing a source or array of sources to the player's src() method.
videojs.getPlayer('my_player').src({
type: 'application/x-mpegurl',
src: 'https://example.com/video.m3u8'
});
See e.g. https://videojs.com/guides/player-workflows/
Related
For a small website I am creating, I have an embedded piece of audio which plays on the landing screen, the current method I am using is just by simply embedding it via standard html:
<audio autoplay loop id="player" src="audio1.wav"></audio>
The issue with this method is it is possible to find and download the src when looking in devtools. I want to mask the src so nobody can find it and download it, as the audio is up for sale/copyrighted.
Is there a method where the original .wav audio file cannot be traced back and downloaded?
There's no real way to prevent someone from obtaining the audio in one way or another if they're determined enough. However, a few alternatives are listed here, with some more concrete code examples here. Consider only playing a small sampler to prevent someone from getting the entire audio clip.
so i'm currently trying to embed some audio into my website using Dreamweaver and for some reason it won't play, is it a problem with the code or just the files? Thanks in advance.
<audio controls src="stickerbush.mp3">
your code is correct, I test it, and it work very well. I think you need to check the audio if it is working (or try with another audio) and/or the audio file location
I have a short video that I want to upload and use in the following code:
<video>
<source src="video_url.mp4">
</video>
It's very simple but my problem is: I have no own file server. That's why I have to find a file-hosting provider where I can upload my video and use it from there.
But all they give me is just a download link for the video which is not what I need. What I need is a video-URL that directly plays the video.
For example like this one: http://clips.vorwaerts-gmbh.de/VfE_html5.mp4
I have actually found a site that does what I need. This is the site: https://pomf.se
But unfortunately, that site is not available anymore.
Can anyone help me? How or where can I upload my video to get the required link-format? (I have the same problem with audio files)
Could you use YouTube? You can create unlisted videos so they don't show up to the general public (they aren't public though). Other options could be Dropbox or S3 for inexpensive ways to host the videos yourself. Fact is, its storage space.. and that isn't free.
i am coding on a custom player for quite a while now.
My plan was to use soundcloud as my backend. And the HTML5 audio Tag as my streaming object.
I also want to include a Canvas for a bit of visualisation. And thats were the problem starts.
For the Visuals to work on both Browsers, I need to load the audio into an arraybuffer via xhr request. But then I can't use the audio Tag anymore. Which is sad, because by now I know how to code all the functionality i need based on it.
I found the article on html5rocks about html5 audio and WebAudio being best friends.
There is also an example on how to use the tag with an frequency bar visualizer. BUT
this only works on Chrome, because Firefox - maybe some of you have noticed - will play .mp3 files but inside a video object. For the visuals to work I would need .ogg files for Firefox. But then i can't use soundcloud as my backend anymore.
So do i have to rethink the whole player - or is there a way to decode the audio on both browsers while using html 5 audio?
thank you very much.
That's an issue with FF (no MP3 support in <audio>). But can't you get a media stream from the element also? It shouldn't matter that it's a not an - audioContext.createMediaElementSource should work on that, too.
I currently have a flowplayer set up that uses the RTMP plugin and streams 3 files one after the other (a playlist). Currently I only have the flash version of the player doing this but I would like to somehow do the same thing for a HTML5 fallback for iPads, iPhones & Android.
I managed to get it so there was a HTML5 audio player playing one of the files but it needs to play all 3 one after each other.
Firstly, is this possible? Secondly, would there be anyone that can help me code this for a page as I don't really have a great deal of knowledge doing this.
I'd also like to switch the flash version over to HTTP rather than RTMP.
Thanks in advance.
HTML <audio> does not offer internal playlist capabilities.
What you need to do is to
Write your playlist into Javascript array
Listen to <audio> ended media event
Set <audio src> to next item on the playlist in your event handler
https://developer.mozilla.org/en/DOM/Media_events