display src of html5 audio file - html

I have an app that uses tiny mce to embed audio files using html5 so it ends up embedding like this;
<audio width="300" height="32" preload="none" controls="controls" src="../upload/blah .MP3"></audio>
I would like to however show the name of the file under the player i.e. the src, any ideas of how it can be done?

I assume your audio file is embeded inside the tinymce content.
In this case the following should work
$('#target_id').html($(ed.getBody()).find('audio:first').attr('src'));

Related

how should we link videos and audios on our html file?

<video width="500" height="500" controls="contrlos">
<source src="hope.mp4" type="video/mp4">
</video>
this is the code I tried on vscode, the video file is stored in my drive c, but I don't know why when I run it, it doesn't work, and I cannot play the video. by the way I open it in Chrome. and when I google a video and copy the link address in src="" the same problem repeat. does the audio and video files we want to put in html need to be stored in a special place in my computer?? plz help me! I'm beginner.
There are 2 solutions of this problem:
Keep the video file in same folder where you have stored your html file or
Wrrite the full path of the video file where you have stored.

How to add drive link in audio tag in html?

I am using audio tag in my html code for playing the audio in my webpage ,i have one doubt without passing directly audio to the audio tag i want to use google drive link(link contains one audio).please help me to acheive this ...
<audio controls autoplay>
<source src="https://drive.google.com/file/d/11wfYWiukbIZJQnDL385jQs2SGQA5ESbL/view?usp=drivesdk"></audio>
What you are doing is correct only one problem you cant use the google drive link directly.
1.You should go to google drive and choose share file you will get something like the following link: https://drive.google.com/file/d/11wfYWiukbIZJQnDL385jQs2SGQA5ESbL/view?usp=sharing
Extract the id from URL 11wfYWiukbIZJQnDL385jQs2SGQA5ESbL
URL for playing the audio file https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL
URL for downloading the audio file https://drive.google.com/uc?authuser=0&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL&export=download
your final code will be something like the following:
for playing:
<audio controls autoplay>
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL">
</audio>
for downloading:
<a href="https://drive.google.com/uc?authuser=0&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL&export=download"/>Download</a>
note: The auto play will not work on iPhone devices if saving power is enabled which is by default

Play videos with iframe in html

I want to play a video, but it is only downloading.
Here is my code:
<iframe src="videos/1.mp4" width="540" height="310"></iframe>
The Result when the page load is:
How can I play the video with iframe and not with the video tag?
Although some browsers might support this way of importing a video(Using an <iframe>) some browsers will act towards the video as a file and attempt to download it. The correct way to display a video is using the <video> tag:
<video width="540" height="310" controls>
<source src="videos/1.mp4" type="video/mp4">
</video>
See W3Schools tutorial here: video tag simple tutorial
Actually there's nothing wrong with your code!
But the problem is with IDM (Internet Download Manager) as it hooks every link that your browser is requesting and finds whether the destination you're trying to access matches what is in IDM's extensions list, so the first thing would execute after the file being requested is IDM as it has higher priority than your browser and its anyway serving as a listener inside your browser.
you either have to exclude "localhost" from the hook
or you have to remove the mp4 extension from IDM's extension list (which isnt efficient)
Just use the <video><source src="..." type="video/mp4"></video> tags.
An iframe tag is used to display another page, not used to play video. You can not play a video with that tag, whether or vimeo youtube or any other company lets you add video using a "iframe" is because they have previously configured some options on that page and have put a video. And that's why you can insert a video through an iframe.
Now if you want to force this, you should do the following:
Create a html-and in that html implement a video with the
Then from the other page write the <iframe src = "yourwebcontentvideo.html" />
And that would be it.
An iframe is an HTML element that allows an external website or webpage or document(like word, pdf) or video to be embedded in an HTML document.
Here is an example for loading an Youtube video through iframe tag on your site
<iframe width="560" height="315" src="https://www.youtube.com/embed/2d2rfsm3ApU" allowfullscreen></iframe>
Output:
<pre>
<code>
https://jsfiddle.net/anjaneyulu15/og64djL0/7/
</code>
</pre>
Original content is taken from iframeinhtml.com
You can use this, you can use the mp4 url as url parameters and return HTML VideoJS player.
https://simplevideoplayer.bubbleapps.io/
You can generate dynamic content like that:
let ifTest = document.getElementById('if-test');
let videoPath = 'https://file-examples.com/storage/fe63ea2155630fa7ba2b829/2017/04/file_example_MP4_480_1_5MG.mp4';
let videoHtml = '<html><body><video width="100%" autoplay="true" loop="true" muted="true" ><source src="' + videoPath + '" type="video/mp4" /></video></body></html>';
ifTest.setAttribute('srcdoc', videoHtml);
ifTest.setAttribute('style', 'width:264px; height:150px;')
<iframe id="if-test" srcdoc=""></iframe>

Insert/Play Local Video Path File With HTML5 Video Tag

I'm trying to play a MP4 video using video tag, but nothing is displayed. When I have my video in the same project directory the video plays, but I need to have the video in another directory. This is my code:
<div id= "show">
<video width="320" height="240" src="file:///F:/test.mp4" type="video/mp4" controls>
</video>
</div>
The problem is the path, so, what is the correct way to declare file's path?
Go to the mp4 when it's in the other directory and right click on the properties. copy the file path and then paste it in (and precede it by file://). make sure you turn the slashes to turn forward in the file path.
it should look something like this
file:///F:/Users/yourname/folder/subfolder/test.mp4

Embedding SWF file in HTML5 - How to add alternative content?

I'd like to embed an SWF file in HTML5. It works fine with this code:
<embed src="main.swf" width="550" height="400" />
But how could I show alternative content (an animated GIF image, or a static JPEG or PNG) just in cases which swf file is not supported (and still validating in w3! ;) )
Thank you!
Use the object tag instead of the embed tag like so:
<object width="550" height="400" data="main.swf">Alertnative Content Here</object>
See: EMBED vs. OBJECT