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?
Related
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.
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.
currently I have a problem with a project. I have a full HD video I'd like to play in Background. The video is h264 encoded. The Problem is, that the video is quite long, so it has 90MB. But even with my 200MBit connection I have to wait about 5 seconds before the video starts to play.
What can I do to prevent this?
I use this code:
<video autoplay muted loop id="myVideo">
<source src="video.mp4" type="video/mp4">
</video>
I'd like to have the same performance, like Netflix. After a simple click the video just starts.
How is it possible?
There are a few things you can do to help:
1/ optimize the video for fast start. The MOOV atom in an MP4 file is normally at the end which means it has to get to that before it will start playing. Using ffmpeg you can move that to the front:
ffmpeg -i source.mp4 -a:v copy -a:c copy -movflags faststart output.mp4
(this will copy the video and audio with no changes, just change the package)
2/ you could add the preload attribute to the video source to allow the browser to optimize based on it's own rules what pre-loading it's going to do
<video preload="auto" muted loop....>
which will help, but still not give you 'instant' start.
3/ Depending on the size you might want to preload the video into a blob when the page is loading so you can show the 'play' button when it's fully buffered and ready to go. See this answer for a solution (rather than re-typing it here)
4/ Most browsers have support for adaptive streaming (HLS or MPEG-DASH) so you could create fragmented mp4 files which will allow 'instant' start at a low bitrate/quality that ramps up as the browser/video player (eg jwPlayer) detects and adapts to network conditions
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
I am working on a project in which I want to play different types of news channels live on my website
Here is my code in which I am trying to play the channels
<div class="video_box">
<iframe id="example_video_1"
class="video-js vjs-default-skin"
controls preload="none"
width="562"
height="370"
poster="images/movie_clip.png"
data-setup="{}"
src="link to the live streaming channel">
</iframe>
</div>
Now the problem is when I put the src of the channel in my iframe src tag it gives error and channel does not play.
I have tried to play the channel on the same player as it is playing on the channel website but still didnt get the result.
Any Help?
You should copy the embedded source code from the channel iframe link given on the channel websites. Different website will just also provide the iframe link for the news channel to be displayed on your site. Just copy that iframe code and paste it on your website install the player on your site page and run the page the channel will start streaming on your page.
first of all are you copying the embedded source code or just the channel iframe link..???
there is difference between two for eg: to run youtube vedio directly on your side you need to copy embedded source code which is available on youtube share button and then click embedded and u will get iframe embedded source code. similar goes for news channels check this link might help you