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/
I tried to use google drive as a place to host videos, but whenever I try to use the video as a source, google never returns anything. (Not even a http response)
Example video player
<video>
<source
src="https://www.googleapis.com/drive/v3/files/<file_id>/?alt=media&key=<api_key>"
type="video/mp4"
/>
</video>
If I enter the url in the browser it successfully prompts me for permission to download.
Does anybody have any idea what to do?
// This works...
<video src="https://www.googleapis.com/drive/v3/files/fileID?alt=media&key=apiKey">
// But, even better if you have access to a worker or can otherwise output the file through a script (and modify resonse headers)
async function getFile(request) {
let response = await fetch('https://www.googleapis.com/drive/v3/files/fileID?alt=media&key=apiKey', request)
response = new Response(response.body, response)
response.headers.set('Accept-Ranges', 'bytes') // Allow seeking, not necessarily enabled by default
response.headers.set('Content-Disposition', 'inline') // Disable Google's attachment (download) behaviour, display directly in browser or stick into video src instead
return response
}
addEventListener('fetch', event => {
event.respondWith(getFile(event.request))
})
Short answer: Nope
Longer answer: Oh boy. I spent quite a long time trying to figure this one out myself! I'm working on a project called DriveStream, that aims to use purely JavaScript and Apps Script to make an organised video library of a Drive account.
The project itself works fine, but implementing video streaming did not go anywhere near as planned. I tried a few different methods. One similar to yours and the other involving getting the downloadUrl property of a file and parsing the html of the download prompt page to give me a direct link to the file. I can initiate a download of that file, and that can be seen in the network requests, but there is no way to get it to stream into a video container.
The reason that doesn't work is due to the limitations of AJAX. It can return the data from a video, but there seems to be no way to funnel that data into a video container.
In the end, I've had to compensate by having the 'Play' button of each video only link to the preview video.
https://drive.google.com/file/d/fileId/preview
It's not a bad workaround, as it can play up to 1080p encodes of anything you upload.
This should work:
<video>
<source src="https://drive.google.com/uc?export=download&id=file_ID" type='video/mp4'>
</video>
Replace "file_ID" in the link with your video ID. (to find it - right click on the Google Drive video, get shareable link. The file should be shared in order to access the file.)
It plays the source video. If you would like to change quality or to use unsupported codecs it's not easy to get google drive stream/converted files as said in previous answer. (Ajax will not let you get the link because of CORS and PHP is server side and the link contains an IP address so will not be accessible directly from client side.)
It's a long answer I will try to shorten it up..
Upload your file to the drive and using the share option make it public.
Then click on the preview option, and it will open a new tab.
Look for the vertical 3 dots (top right corner) leading to a sub-menu and select open in a new window.
As soon as you get to the new window click on the vertical 3 dots (top right corner) and this time you will see an 'Embed item' option click it.
You will get the iframe code now include it your webpage or website.
Just give it a try once!!!
I hope this helps thank you!!
I might be a bit late to answer, but if anyone's interested, I have written an answer on streaming videos from Google Drive before here. There are a few ways to go about this, but in summary, you will have to do some server-side programming (can be ASP.NET, PHP etc.) if you don't want to use Google Drive's embedded player. Alternatively, if you have large videos that you want to stream that exceed the limit of 100MB, have you looked into HLS (HTTP Live Streaming)? You can create .m3u8 playlists with segments of your video (preferably less than 100MB) and that way, you can stream your videos. I hope my answer helps!
Ok i wanna do a simple question but i do not know if it comes also with a simple answer..
I will ask the simplest scenario that derives from this question... How can i "put" a video in a html page(site) from my pc or server that can be watched by everyone.
I dont want to embed a youtube video in the site but i want that video to be "embed" from my server or pc. What im actually asking is how to make a site like youtube(remove the part that users can upload videos) that has videos and are being "streamed"(i think thats the word) directly from youtube servers.
Given your file tree looks like this :
index.html -- The web page you're serving
media/
media/bunny.mp4 -- Your video file
media/bunny.jpg -- [optional] A cover picture while the use plays the video.
And in index.html
<video src="media/bunny.mp4" width="400" height="222" controls poster="media/bunny.jpg"></video>
But if you're searching for an alternative where the user can't download the file (and that is a requirement even Youtube doesn't fulfil), you can read this post HTML5 live streaming
Or simply use a ready solution like Plex Media Server
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 simple web page written in HTML for testing video streaming.
<video controls name="media">
<source src="external_url.mp4" type="video/mp4">
</video>
That's work in local, but when I upload the page on my free web hosting, the page doesn't load any video. Is there a workaround? Maybe using an embedded player?
update
I've discovered that's a problem related to video. Unfortunately I cannot link it because it's for a private presentation, but I've tried with other videos and that works well. Any idea why my video doesn't play?
Please check that the URL is intact.
Check if there might be some file discrepancies. The control currently supports mp4, ogg, and webm as seen here.
Use the canPlayType() method to test the site AFTER the upload - just to be sure we're covered on that front. See here for the DOM reference.
You can fiddle around here if you don't want to have to upload the site first before live-testing it.
Hope that helps.
How do you upload the video? If FTP, text transfer mode may have ruined the file. The hosting (especially, a free one) can impose a limit on the file size (uploaded or served) too. Or even on content types (e.g. narod.ru didn't allow to read files directly, serving a "download page" on an attempt instead).
Try to download the video file directly and compare it with the reference one.