Loading video from database and playing video faster in website - javascript

I'm developing the html5 website user's can upload there videos and also they can watch the video through my website one problem i'm facing locally video's are loading faster without buffering can watch but i uploaded in to the google cloud it's taking time to load the videos and it's more time to buffering to play the video.
through the select query i'm fetching the video like
SELECT video FROM video i'm using mysql database.
<video class="embed-responsive-item" height="500" controls controlsList="nodownload">
<source src="<?php echo $u_pvid; ?>">
Your browser does not support the video tag.
</video>
give a feedback to how can i fix this issues from website...

you should select address of video from database not all contents.actually your video file should save in hard disk or use CDN and access them over videos address in your database.
also your internet speed specifies how fast video load and play.

Related

Video url hosted by azure media player not accepting media fragments

I am trying to load multiple videos hosted on Azure blob services with dynamically generated timestamps in my react app. The video element looks like this:
<div className="Player-video-container">
<video
id="vid1"
className="azuremediaplayer amp-default-skin"
autoPlay
controls={false}
width="640"
height="400"
poster="poster.jpg"
src={`${this.state.sourceUrl}#t=${this.state.startTime},${this.state.endTime}`}
>
</video>
</div>
Example URL https://astorageserver.blob.core.windows.net/video-storagea/603001712779238-toystory.mp4#t=20,25
In theory this video that I hosted should load and begin playing at the 20 second mark and automatically pause at the 25 second mark. I have tested this on videos hosted elsewhere with success, but it starts at the beginning as if there's no media fragment. I also can't skip ahead or backwards in the video.
Example URL https://file-examples.com/wp-content/uploads/2018/04/file_example_MOV_640_800kB.mov#t=20,25
This link will correctly start at 20 seconds and pause at 25.
I am new to Azure hosting services and can't figure out a work around. The fragments need to be injected via the video source urls. Is there a work around to this?

HTML youtube video link not showing video but downloads file

I am trying to load a video on my HTML page by using this code:
<video v-for="(data, key) in projectData.videos" :key="key" width="320" height="240" controls>
<source :src="data.url">
</video>
An example of a source that I am using is: http://www.youtube.com/v/qUfzflYqQeE
The url that I am getting is from an API.
But, the issue is that when the page is loaded and the video tags are shown, it is only blank and with the source that I have pasted above it tries to download a file.
However, I don't want this to happen, I just want to load video and let it play.
If someone can please help.
Many thanks.
If you want to use a <video> element to play a video, then the URL you give it must point to a video file. The URL you have does not. It leads to an HTML document.
If you want to embed YouTube videos, then use the YouTube embed code (which uses an iframe and the YouTube player along with YouTube adverts). YouTube isn't in the business of hosting plain video files for display on other sites without YouTube getting analytic data and being able to show adverts.

How to play .asf and .xesc video file on website?

I have two different video files. One is of .asf format and another is of .xesc format. How can I play these video files on my website?
The best solution is to upload it to a video-streaming service (such as YouTube) and play it on your website as an embed video. Then you do not have to worry about streaming the video - which can drag the speed of your entire website down.
However you can also convert the video to a supported HTML5 format and upload it to your server and use HTML5 builtin video player (not recommended).
You should use the video tag - HTML5 feature
<video height="500" width="500" controls>
<source src="source/of/the/video/" type="video/type" />
Can't play this video right now...
</video>
If you do not want to convert it, you may want to check out this answer

html5 video: very slow loading

First: there are topics with the similar title. I browsed them but dint find a satisfactory answer.
I am testing autoloading of html5 video in android and ipad.(Auto load only works in few browsers: Firefox, Opera and Safari).
The video loads instantaneously if it is on the device that is playing. But if the video is on a server it takes very long time to load(It took nearly 5 mins for the video to start).
I dont think the problem is with bandwidth. For testing purpose I have hosted the files on google drive. (accessing Google drive should be pretty fast and the size of the video files are less than 2MB).
Can you suggest how to speed up video loading?
Here is my video element:
<video id="video1" width="430" height="430" controls preload="auto" >
<source src="https://drive.google.com/uc?export=download&id=0B0eCCOckMJskRDl2enU4N1JLSGs" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="https://drive.google.com/uc?export=download&id=0B0eCCOckMJskbURTTjJVaG42V0U" type='video/webm;codecs="vp8, vorbis"'/>
</video>
Thanks.
The reason it does this is because sometimes the video encoder (whatever programme was used) places the video index at the end of the video file rather than at the beginning. This interferes with progressive download as the browser doesn’t know anything about the file until it has downloaded it and read that index.
Run this program below on it, which will simply re-encode the file, placing the index at the beginning.
http://renaun.com/blog/code/qtindexswapper/
Let me know if this helps.
Install qt-faststart, then run the command:
qt-faststart inputfile.mp4 outputfile.mp4

Some YouTube iframe embeds not working in HTML5 mode

A YouTube iframe can play a video using an HTML5 player instead of Flash, by adding "html5=1" as a URL parameter. However, this only works sometimes. For example the emebeds below are identical, except for the YouTube id in the iframe URL. The first iframe plays fine if there is no Flash player installed but the second requires flash. I've tried this in both Chrome and Firefox.
<iframe title="YouTube video player" width="720" height="720" src="http://www.youtube.com/embed/O_ceIIJeVNQ?html5=1&modestbranding=1&controls=0&title&loop=1&playlist=O_ceIIJeVNQ&enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A8080"></iframe>
<iframe title="YouTube video player" width="720" height="720" src="http://www.youtube.com/embed/YmehSeNXXt4?html5=1&modestbranding=1&controls=0&title&loop=1&playlist=YmehSeNXXt4&enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A8080"></iframe>
http://jsfiddle.net/judeosborn/2SAas
Any idea how I can get embeds to play in HTML5 consistently?
#Jude Osborn
"Apparently HTML5 video will not play for videos with ads, captions, or annotations"
That is impossible, the biggest part of youtube videos will have ads captions or notations
if it was true Youtube would be dead soon.
The fact that one video will play and the other not
is probably caused by if a version exists that is available
in the right format...which might depend on how old it is.
They dont convert videos on the fly..but create various versions
and send the right one to the right browser or device.
It should be that the new(er) embed code as shown below videos #Youtube
takes care of sending the right video to you.
By the way NONE of the PLAYLISTS will play anymore on iOS (iPad/iPhone)
i noticed that today, no replies are given in any yt-forum
Single videos play fine.
A colleague of mine found the answer in the original HTML5 video post announcement here:
http://youtube-global.blogspot.co.uk/2010/01/introducing-youtube-html5-supported.html
Apparently HTML5 video will not play for videos with ads, captions, or annotations.

Categories