How to add drive link in audio tag in html? - 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

Related

How to edit title when downloading video from html

I have a gallery of videos and I am using the default video HTML player to display them.
But at the moment the API I am using is giving me a lot of links with the same name like
https://{id}/vid_1080.mp4
So if I try to download them they have the same name
vid_1080.mp4
Is there a way to change the name of the video when I try to download it?
I can't use headers like content-disposition and I don't have any control of the API (I am using the reddit API https://www.reddit.com/r/{subreddit}.json)
The code I am using is like:
<video [src]="medias[i].url" [title]="medias[i].name" autoplay controls loop>
</video>

How to auto play the audio when the web-page is opened from google drive link?

I have normal html file in that i add one audio tag with autoplay attribute , when the page loaded sometimes it's playing automatically sometimes it's not playing can you please help me to fix this issue ...
// src link is from google drive
<audio autoplay>
<source id="my_audio" src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL">
</audio>
Suggestion:
When I tested it on my end, I do not get the same intermittent issue with audio not auto-playing using HTML <audio> autoplay attribute with an audio source that's residing on Google Drive. Also, I have checked the public Google issue tracker and there's no active reports about audio from Google Drive not auto-playing when being used as an audio in an html file.
Perhaps, you can try this implementation from this similar answer:
Recently many browsers can only autoplay with sound off, so you'll need to add muted attribute to the audio tag, that is not make sense, so in my opinion the best way is adding document.getElementById('audio').play(); after your tag. Take a look at this code:
<audio controls loop style="display:none" id="my_audio">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<script>
document.getElementById('my_audio').play();
</script>
src and id above were tweaked to your actual code
You may also want to check the answers from How to make audio autoplay on chrome

CherryPy - Redirect to a playable video

I'm trying to make my "api" return a direct download link to a video given it's ID, when you enters the URL manually, the download is correctly initiated, but if you place it in a <video> tag, the video does not play because it was not redirected...
The downloading URL is: 34.69.63.251:8080/?download=videoTest, this will redirect you to a .7Mb video that I'm using only for testing purposes.
The code that does this is:
if link == ("videoTest"):
wlink = str("https://onedrive.live.com/download?cid=XXXXXXXXXXXXXXXXXXXXXXXXXX&authkey=XXXXXXXXXXXXXXXXXXXXXXXXX")
r = requests.get(wlink, allow_redirects=False)
r.status_code
r.headers['Location']
finalurl = r.headers['Location']
raise cherrypy.HTTPRedirect(finalurl,302)
I want to be able to give the <video> tag the "34.69.63.251:8080/?download=videoTest" link, and play the redirected link, is this possible?
The "r" variable is my request, this program makes a request to the onedrive link (wlink), and allow redirects. In response you get a direct download link for a desired file, the direct download link works as a playable video, but the HTML tag tries to use the "34.69.63.251:8080/?download=videoTest" link as the playable video, dispite being redirected
The html tag that is not working is:
<video width="400" controls>
<source src="34.69.63.251:8080/?download=videoTest" type="video/mp4">
Your browser does not support HTML video.
</video>
example of a working (but temporary, will stop working soon) link that the api returns:
https://hzde2w.bl.files.1drv.com/y4mNrljAhc6bM0XNJZM59WsRoW4Amx0yr07hhDmFJ3bYdgyhT4rM8ou2uLaVvgu7yBP9BzS1rGGq69cgTYvAql7tLR9Sp-JSbd7beH6eSFB1o-3AnDWoBqrfi0ST60GRH64nFwaVHoAWV6yyYKPOqJ2EiGfQf8Kgt1Ay7kBJLOg3Pws6d2k19Yv3CEShxuaC7QxCQJG5JQWV2zgu7oB0xaBgA/Bunny.mp4?download&psid=1
Thank you!

Play videos in a directory

Super green on some of this stuff so I apologize in advance.
I want host video files on my website and have them play in the browser. Currently, when going to the hosted file it just downloads the .mp4. Is there a way to set up a folder of videos to play the video in the browser automatically instead of downloading? I'm trying to avoid having to maintain html and embedding videos. I'd rather just send a url to the specific video and the end user only play that video in the browser.
I have the files hosted on Domain.com. Ideally, I would send a subscriber a link like "www.website.com/videofolder/video_name.mp4" and that video would just play in the browser. Is there a way to do this without making separate html files for each video?
You will have to send an html wrap with the link, this:
<video width="320" height="240" controls>
<source src="url/to/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Otherwise you'll just be sending a file stream, hence the download you're seeing.
I will also recommend you to explain:
How you're providing the file to the browser (Hosting),
Are you using NodeJS, Flask, Django, NGINX, AWS S3, etc.
So other contributors have more idea of how to help you out.

How to play google drive mp3 file using html audio tag?

My aim is to play the mp3 file from the google drive. I am using the plugin MediaElement js. The reference I got is https://www.portalzine.de/dev/html5/hosting-mp3-files-on-google-drive-html5-audio-player/
This is working in chrome, Mozilla firefox but not in IE-11, safari and opera. I want this to be play in all browsers. Please give me the suggestions....
1. URL for the audio file (anyone can view)
https://drive.google.com/file/d/1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-/view?usp=sharing
2. Extract the id from URL
1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-
3. URL for playing the audio file
https://docs.google.com/uc?export=download&id={id}
example:
https://docs.google.com/uc?export=download&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-
4. URL for downloading the audio file
https://drive.google.com/uc?authuser=0&id={id}&export=download
example:
https://drive.google.com/uc?authuser=0&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-&export=download
5. HTML for playing audio:
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id={id}">
</audio>
example:
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-">
</audio>
6. HTML for downloading audio:
<a href="https://drive.google.com/uc?authuser=0&id={id}&export=download"/>Download
example:
<a href="https://drive.google.com/uc?authuser=0&id=1nQklEicsMeGBnuk0vv6zkHtXtyGyO9S-&export=download"/>Download
In another thread on another page someone wrote the only solution that has worked for me:
If you share an MP3 by link, you obtain a link like this
https://drive.google.com/file/d/XXXXXXXXXXXXXXXXXX/view?usp=sharing
where XXXXXXXXXXXXXXXXXX is the ID of your MP3 file. Then you can obtain a direct link to this audio by
http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX
In particular you can use
<audio controls>
<source src="http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX" type="audio/mp3">
<p>Your browser does not support HTML5 audio :(</p>
</audio>
The first link is the one you normally get, the other link is what you want to use with
Try to think of this as HTML code:
<audio controls>
<source src="http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX" type="audio/mp3">
</audio>
Make sure you convert that link right and it will work!
I'm using Direct Link Creator plugin of Google Drive and get the link easily. Here's an example.
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id=0B_ETxiqrp0SzbF9VQ3JCS2hnSlU">
</audio>
<video controls="controls">
<source src="https://drive.google.com/uc?export=download&id=0B0JMGMGgxp9WMEdWb1hyQUhlOWs" type='video/mp4' />
</video>
I was trying to accomplish this inside the SSML audio tag for Actions on Google. None of the above steps seemed to work. I finally found a solution.
1) Get the file ID from the sharing link
https://drive.google.com/file/d/your_file_id/view?usp=sharing
2) Construct the direct link
http://docs.google.com/uc?export=open&id=your_file_id
3) Paste the direct link into a web browser and hit enter
4) Copy the resulting URL after you have been redirected by your browser
Note: This will be a much longer URL that looks something like this:
https://doc-XX-XX-docs.googleusercontent.com/docs/securesc/XXXXXXXXXXXXXXXXXXXXX/XXXXXXXXXXXXXXXXXXXX/000000000000000/0000000000000000000000/*/your_file_id?e=open
Using this final URL is the only way I could get my uploaded sound files to work with Actions on Google.