Live Channel Streaming on web Page - javascript

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

Related

how to observe embedded youtube video

I want to embed a youtube video on my own website and I want this youtube video not to be skipped in any way, but not to adjust its speed and to track the time it watches, but I could not find any source.
I tried to use the youtube iframe api, but I can't follow the stats without stopping or starting the youtube video there.
I would suggest that you should first download the video, and then put it onto your site through a <video> tag. The youtube iframe api is designed only for having videos that function exactly like they do on the youtube website, which includes the things you don't want.

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.

Youtube video html code that runs any Youtube video URL on a web page

I am trying to code that runs any Youtube video URL. For example these are the urls
https://www.youtube.com/embed/XGSy3_Czz8k
https://www.youtube.com/watch?v=XGSy3_Czz8k
Iframe doesn't run the URL that contains watch text. What html or JS code should be used to run any video format on web page?
You can have your video start playing automatically when a user visits that page by adding a simple parameter to your YouTube URL
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>

Mute youtube video that has to be embedded via HTML iframe

Problem
I'm working with a site where the developer coded an embedded youtube video to change via a script altering the iframe's src tag.
I need to mute this element, and while I'm aware that a few libraries allow me to embed a video via script with the option of muting, I'm unaware of any way to use those methods without having to rescript everything that has been done on the youtube player. What's the best option here?
element
<iframe id="tv" width="100%" height="100%" src="http://www.youtube.com/embed/9NFUgVa68hw?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe>
script
var channel1 = "http://www.youtube.com/embed/dFU6Cy4Hd5A?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1";
$("#channel-1").click(function(){
$("#tv").attr("src", channel1);
$(".mid-bar").text("TNT");
});
The above is just one module of the script; there are 22 channels.
Again, I'm trying to mute the embedded video without having to rescript the src changes. How can this be done?
I understand you don't wish to change the src, however, if you append enablejsapi=1 you can then use javascript to mute the video by calling object.mute()
Reference: https://developers.google.com/youtube/js_api_reference#Playback_controls

Categories