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.
Related
I am trying to build an embeddeable video frame to display video content on other pages. the video itself is being served from a certain location, and it plays fine with using <iframe></iframe> however I want this specific build of the video to be able to target a different src which is why i wanted to build it up with the video html tag instead of an iframe
<video width="320" height="240" controls autoPlay>
<source src="https://embed.truthcasting.com/video/100003694/208448" type="video/mp4"/>
Your browser does not support the video tag.
</video>
the problem is the CORB error, however if i serve up the same content from an iframe
<iframe
style={{ height: "25rem", width: "100%" }}
scrolling="no"
src="https://embed.truthcasting.com/video/100003694/208448"
webkitallowfullscreen="true"
mozallowfullscreen="true"
allow="autoplay; fullscreen;encrypted-media;"></iframe>
the content will come through, no CORB error. Now normally I wouldnt mind and i would just use the iframe to display content, however i was hoping since with <video> you can designate multiple sources.
but no matter ive tried I cant seem to get around the CORB.. is this a server issue similar to CORS? do i need to add something somewhere in the server so it can display in this manner?
the video html tag requires an actual video, the src url that was supplied to the HTML tag, is that to an external site, that plays a video, but isnt an actual video itself. the reason that it works on an <iframe> is because the iframe will display a webpage, <video> will not.
I can run video with link embed youtube.
My code:
<video id='my-video' class='video-js' controls preload='auto' width='640' height='264'
poster='' data-setup='{}'>
<source src='https://www.youtube.com/embed/fZ-yXDJJj5g'>
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
Video is show loading but don't play.
Please help me
As stated on the official repo, video.js doesn't support youtube video out of the box, you need to use a plugin for that:
It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins)
So you'll have to use a plugin for that, like for example this one.
HTML5's video tag only works with video files. It doesn't work with Youtube video links(As those links do not point to source of video, instead they are a pointer to an HTML page). For that either you have to find storage link of video, which is not a good practice. Because Youtube can change that anytime. Better to use iframe for displaying Youtube video on your website.
You could just use tag then pass the src of the video. or even embed just like this.
<iframe id='my-video' class='video-js' width="640" height="264" src="https://www.youtube.com/embed/fZ-yXDJJj5g">
</iframe>
or
<embed id='my-video' class='video-js' width="640" height="264"
src="https://www.youtube.com/v/tgbNymZ7vqY">
then target those id to perform whatever you wanted to do.
I've encountered this problem, video tag does not work on this scenario.
So, I've research you can use iframe tag or embed then play with it into the script.
I'm so sorry, but I can't get a youtube video to play (https://www.youtube.com/watch?v=SyRv0-oPfKE) inside a video tag.
I know about the iframe API but in this case it has to have the default html5 controls, not the youtube controls.
I probably missed something stupid but can't figure it out...
Anyone know how to do this?
EDIT:
so I tried:
<video
controls='controls'
src={`http://www.youtube.com/get_video_info?&video_id=${id}&asv=3&el=detailpage&hl=en_US`}
type='video/mp4'
/>
and tried:
<video
controls='controls'
src={`https://www.youtube.com/watch?v=SyRv0-oPfKE&html5=1`}
type='video/mp4'
/>
but I get blank page.
The HTML video element expects video files as a source. If you want to play a YouTube video using the native HTML video player, you'll have to provide a link to the video itself, not to the YouTube website for this video.
Also keep in mind, that not all browsers can handle any video formats. See MDN: Media formats for HTML audio and video.
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
I am trying to embed a video into a webpage using lightbox. From a design perspective, how should I place the video on the page.
I mean the videos are lined up across the page as thumbnails. Should I take a frame from the video and display that as an image that the user clicks? Or does the various video plugins take care of creating the thumbnail for you?
If you're using HTML5, the thumbnail of a video is defined using the 'poster' attribute in the video tag. Here's an example:
<video width="500" height="375" poster="myThumbnail.jpg" preload="none" controls="controls">
<source src="http://hostname.com/myVideo.webm"/>
</video>
If you want to create this image automatically using a given frame of the video, you should check the link posted by F. Calderan