I am trying to put a video into my website using html5.
The sound of the video plays, however you can just see a black space.
I have used the basic <video>from w3schools. My code looks like this...
<video width="420" height="315" controls>
<source src="myMovie.mp4" type="video/mp4">
<source src="myMovie.ogg" type="video/ogg">
</video>
sounds like it can be your graphic card, have you googled black screen on html5 video? You might wanna add you graphic card and ios to your search.
Unless you use browser that doesnt support html5. If that's the case, get a html5 browser and try it out :)
Related
I search for solution in many questions but I didn't get answer, I have HTML5 video play :
<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
<source src="{{asset('promos/'.$course->id.'.mp4')}}" type="video/mp4">
<source src="{{asset('promos/'.$course->id.'.m4v')}}" type="video/ogg">
</video>
it works fine but I cant control in progress bar ,I can't move video forward or backward ,How can I do that ?
is anyone can help ?
Video Link
https://streamable.com/k3rved
You HTML5 looks fine - the video below will allow moving forwards and backwards using the scroll bar as a working example to refer to:
<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
If the issue is the lack of thumbnails when you hover over the progress bar, then these need to be generated separately on the server side and included in the video container (e.g. mp4) that you make available.
Update
The video link in the question above is not actually a link to a video, rather it is a link to a webpage.
This webpage does indeed contain a video, along with the videoJS player, when you inspect it, but you can't use the webpage link as the 'src' attribute in a HTML5 video.
Assuming you have permission to use the video, you can extract the src from the video at that webpage. This works in this case, at the time of writing anyway - sometimes videos in a webpage will have access restrictions or authentication requirements to prevent them being accessed from other sites.
It may seem a dumb question but I cannot figure out a solution, I am embedding a local video using the standard html5 video syntax, the problem is that on safari / ios the video won't play and a quicktime striketrhough icon appears instead.
The same error appears on w3c page if I try to playback a video using iphone / ios (testing on xcode):
https://www.w3schools.com/html/html5_video.asp
How can I fix this problem?
This is the code I am using:
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Thanks.
I am looking for the best video player to use on my offline website I tried with some video players but it does not work well. sometimes it is stuck when user try to stream it. If have some video players as youtube player and we can use it offline is the best practice for my requirement. if someone know this please help me. thanks in advance.
Unfortunately no. Videos which are hosted by YouTube are only available to be on the YouTube player.
Like other users have said, you may be interested in HTML5 video. All major browsers will support it.
There are also 3rd party libraries which offer HTML5 video. http://videojs.com/ is a popular one.
you can use HTML5 video tag.
https://developer.mozilla.org/en/docs/Web/HTML/Element/video
e.g:
<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>
You maybe can use HTML5 to Solve that, i hope help with this Link on HTML5 Video Player, if not solve your problem or if you have some questions ask! :)
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Hiii Everyone,
In my project.I tried with html5 video tag.Below is the code
HTML code
<video autoplay loop muted poster="screenshot.jpg" id="v" width="100%" height="">
<source src="img/main.mp4" type="video/mp4">
</video>
it will be play continously in my website.This video is not playing in safari browser.For that i tried in some other way with embed.It is playing in safari
<embed src="img/main.mp4" width="100%" height="" autoplay loop muted id="v" >
</embed>
But what the issue is while i tried with video tag it is like below picture.
After tried with embed tag it is like
What is the issue is when trying with video its is compatible with full width and height of desktop and in embed it showing in very small size and it is not playing continously.If anyone knows the solution of my problem.Please help me to get out of this issue.Thanks in advance.
You should add controls="true" for the tag.
tag can not autoplay in iOS safari browser, and the default appearance is without controls has no play button.
If you don't want to use the default controls, you can create your control bar instead. Using methods of , such as .play() .pause(), to control the video.
it needs height add style="min-height:300px"
<video autoplay loop muted poster="screenshot.jpg" id="v" width="100%" height="" style="min-height:300px">
<source src="img/main.mp4" type="video/mp4">
</video>
you should also try height attribute in embedding. I hope it will solve your problem
<embed src="img/main.mp4" width="100%" height="auto" autoplay loop muted id="v" >
I have a small project of doing some html5 videos embed on a site.
I use a simple HTML video embed code
<video width="560" height="340" controls>
<source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
so my question is that possible to disable the copy URL when you right click on the video?
I know if they really want to get the video link there are ways to do so.
but just at least if I can do that one.
Thanks
You can catch right-clicks via JavaScript and thus prevent the right-click menu.
As you correctly noted though, it’s only a hindrance rather than prevention. HTML5 video is about direct integration into the browser and thus can also be saved like images, for example.