Develop Reference

How to control any embedded video?

I scraped some videos, and displayed them with iframes. That works well, however, I am now looking for a way to control these videos on my react app.
What i mean by control is for instance: pause, play, currentTime in video...etc.
I have tried several things so far.
html5 tags, but it does not work mp4 video link that I have.
A few packages, like jplayer or player.js.
I am pretty sure I can achieve my goal, I guess I just need to find the right tool.
EDIT: Here is a example of my code with video.js
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="https://openload.co/embed/myvideo" type="video/mp4"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>

Take a look at video.js. It will give you a complete control over your video playback. Take a look at their advanced examples.
Also, you don't need iframes to work with videos. If that is a design decision then it's fine but you can do video embeds without iframes.
To control video player instance via js refer to following
JS
var myPlayer = videojs('example_video_1');
HTML
<video id="example_video_1" data-setup="{}" controls="">
<source src="my-source.mp4" type="video/mp4">
</video>
Then you can control the player instance like following
myPlayer.play();
myPlayer.pause();
myPlayer.currentTime(120);
Please look at the player API in the following link
https://docs.videojs.com/docs/api/player.html
Please look at react component implementation in the following link
https://docs.videojs.com/tutorial-react.html

HTML5 video tag doesn't work on mobile

I have TV video stream (which is apparently mpeg-ts stream), if I use html5 video tags it all works find on win/mac machines using Chrome.
<video id="player1" width="640" height="360" preload="none" controls playsinline webkit-playsinline>
<source src=""http://192.168.1.72:9981/stream/channelid/2013555866?ticket=388550710ddf21ad5c6ffd61fcd3d0dc24cf46d2&profile=matroska type="video/webm">
</video>
But that doesn't work on Android tablet nor on iOS.
I have tried installing multiple different JS player, such as mediaelement, plyr, video.js, mpegts... And I have installed like all three browsers on Android tablet - Chrome, Opera and Mozilla for testings. Every single JS player works fine if I watch the video from my laptop (Chrome), but none of them works when I access from Android device.
The furthest I can get is using Opera+plyr(or video.js) to get an audio playing fine, but with a black screen, no video.

add this as your video starting tag and it will autoplay for android and safari mobile :
<video autoplay="" muted="" loop="" playsinline="" id="vid" preload="auto" width="100%" height="100%">
you also need mp4, ogv and webm formats for crossbrowser

This might work for you. It works fine for me.
<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline>

I would try enabling controls as on iOS if your video is supposed to start automatically it will not allow it.
Another thing is to try adding an HTTP Range Header, it helps to split video into byte ranges which is something to take into mind with mobile. This is more for iOS in general but take a look at this link: http://fdiv.net/2013/05/17/getting-html5-video-work-ios-mobile-safari
Also as mentioned by other check the format of your video you should ALWAYS have multiple types available.

Video tag doesn't work on mobile. What I've seen people do lately is use gif's as the poster of the video on mobile. I would also look into tools like Wistia for extra video support. Gifs work on mobile, but as the video assets, they take a while to load since they're usually big.
I don't recommend self-hosting as you won't have a ton of support such as slowly loading the video or dynamically switch from 320p version to HD version as it loads, etc.
For example https://wistia.com/learn/marketing/boost-engagement-with-gifs

If you're using a separate host for your files, its server should have a valid SSL certification like my case. My android video player did not work until I added a certification.

If Html 5 not supported use Flash animation

I want a fallback to my edge animations if the users browser doesn't support html 5. I'm talking about animations NOT video. I created the same animation in flash and now I just need to know how to dynamically switch it out. I assume this is going to need to be done with JavaScript which I'm not very knowledgeable on.

To fallback to flash just include the flash object after the last source in the tag
<video controls poster="video.jpg" width="854" height="480">
<source src="video.webm">
<source src="video.mp4">
[Flash player goes here]
</video>
You can see a much more detailed explanation and a few examples here

VideoJS: not working on IOS

I used the videojs and it is working fine all browsers(including IE) and on Android . But it is not working on IOS devices (iphone and ipad IOS version 6).
Here is the code which I am using to add the video to the page.
<video id="video1" class="video-js vjs-default-skin" width="276" height="153" controls="" preload="auto" data-setup="{}">
<source src=myvideo.mp4 type="video/m4v" >
</video>
I have spent ages and could not find any solution.
I m using video.js Version 3.2.0 and getting the loading spinner forever.
I tried using version 4 and just black screen comes up.
Any Help please.

First put double quotes around the source src attribute and try that. If that doesn't solve it, it sounds like the problem is with the mp4 itself, most likely because of the way it's been encoded or it has a huge filesize. Try using videojs's default movie (http://vjs.zencdn.net/v/oceans.mp4) and see if that works. If it works, you know the problem lies with the movie file itself.

Your web server should support byte-range requests,check whether web server support 206 response. If you are using nginx,add mp4 module.

I solved most of my mp4 encoding issues using handbrake.

Try to change type="video/m4v" to "video/mp4".
<video class="video-js">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
Offical docs.

In what language is media players in websites written

So videos is used a lot in websites
you can put a video into your website using this html code
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
But the media player that will appear is different from the media player in youtube.com (for example)
My question is how do i write a media player for my website?

The native controls vary from browser to browser. YouTube does not use the native controls, it uses a custom set of controls that tell the video to do things like play, pause, set volume etc..

Sites like Youtube use Flash. The ones built into the browsers (non-Flash) are likely C or C++. Maybe some Objective C in Safari.