use custom iframe concept
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>Solution 1 :
Solution 2 :
To play your video on a web page, do the following:
Upload the video to YouTube
Take a note of the video id
Define an element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</body>
</html>Problem :
I am having an issue with streaming a video in Safari for the iPad and Google Chrome browsers on Android devices. The application is working fine on my laptop that is using a Microsoft Edge Chromium browser. I have looked for examples to solve my problem, but I can’t find anything specific to this. The issue is that the client will send a get request to retrieve a video file. I use gridfs-stream to retrieve that file from a MongoDb database, and then a pipe the file to the response object. This allows the user to view the video stream in a video-js player. This works with no issues on laptop and desktop devices with Microsoft Edge Chromium browsers, but it is failing in Safari and Mobile Chrome browsers. Here is my code:
I respond to the request and retrieve the file from the database, then pipe it to the response object in node:
app.get('/get-video', (req, res, next) => {
let video = req.query.video;
gfs.files.findOne({ filename: video }, (err, file) => {
// Check if file ex
if (!file || file.length === 0) {
return res.status(404).json({
err: 'No file exists'
});
}
else {
let readstream = gfs.createReadStream(file.filename);
readstream.pipe(res);
}
});
});
As you can say, I find the file based on the video name in the get request, create a ReadStream, and stream the file to the response object. Here is the html code in which the get request is made from the client. The player is utilizing the video-js library, but I couldn’t find any compatibility issues with creating streams, AND this does work in the Edge/Chromium browser:
<video class="video-js vjs-big-play-centered vjs-16-9 card-img-top" autopreload="false" data-setup='{"autoplay": false, "controls": true}'>
<source src="/get-video?video=<%= post.source %>">
</video>
I am making the source for the video the response sent from the get request, which is the video stream. In the Safari browser I get the error: The media playback was aborted due to a corruption problem or because the media used features your browser did not support
I do not have this issue in any browsers when sending images via the get request. I also don’t have any issues when I simply request static files. The issue seems to be contained to specific browsers when I attempt to send a video stream.
The reason why I am using the stream and not a static file is because I am hosting the application in the cloud. I have to send the raw file from the MongoDb database (or at least that’s my understanding). When I was testing the application before sending it to the cloud this issue did not occur because I could simply utilize the file system and store the file path as the source for the video. However, the file system is not persistent with Heroku application, so I am using a cloud database in this situation. Now that I need to stream it from a database the issues are occurring.
Comments
Comment posted by nesvarbu
I have very similar setup (video.js + node.js + gridfs) and basically the same problem – after playing numerous videos mobile chrome and safari returns same error for remaining videos. Did you find what the issue was?
Comment posted by Simeon Ikudabo
This would be a good idea for certain applications, and i’d add that this solution will not be viable in this application. The video has to come from the server in this situation that is coming from the database. Using the iFrame concept, this will simply prompt the user to download the file instead of playing it in this situation.