I see this error "No compatible source was found for this video." over the video in safari. I am using video.js for displaying videos. And here is html for one of my videos which isn't working on safari:
<video class="video-js vjs-default-skin" controls="true" preload="yes" width="640" height="380" poster="poster.jpg" data-setup="{}" src="video.mp4">
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Related
I can't open the video path in my iphone ios or safari .
but I open it in the browser on the computer can open normally
i try to use iframe or it not work
<video class="video" muted="muted" loop="loop" autoplay="autoplay">
<source src="../assets/img/../assets/img/8851907107345.mp4" type="video/mp4">Your browser does not support HTML5 video.
</video>
<video width="400" src="../assets/img/8851907107345.mp4" type="video/mp4" controls>
<video muted defaultMuted playsinline controls oncontextmenu="return false;" preload="auto" style="max-width: 100%;">
<source src="../assets/img/8851907107345.mp4" type="video/mp4" />
</video>
<iframe width="560" height="315" :src="../assets/img/8851907107345.mp4" allow="autoplay"></iframe>
this code i try it not work on safari in mac and in mobile. it can open in chrome on my computer but chrome in mobile not work
i use nuxt.js
I am using html video player. I want to show control bar always ..currently it shows on hover but i want it should be display always not only on hover.
Include the controls attribute to the video player
<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>
For me adding the control tag always shows the controls in Chrome. Are you using other browser like Safari?
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I am trying to use a video with sound in the video tag but the sound is not playing when I run it in browser ,if I remove the muted attribute video doesn't play .The video directly works in browser if you open the link.Please help
<div class="background-wrap">
<video preload="auto" autoplay="true" loop="loop" muted>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type="video/mp4"> </video>
</div>
I need to play a video inside an HTML file and then inside a Joomla article (first want to try in a single HTML page).
I am using this code:
<video width="500" height="250" controls autoplay>
<source src="videos/video.wmv" type="video/ogg">
<source src="videos/video.wmv" type="video/mp4">
<object data="videos/video.wmv" width="500" height="250">
<embed width="500" height="250" src="videos/video.wmv"> </object>
</video>
I tried downloading a video from Youtube, and it works fine on Chrome and FF, but not on Opera.
However, the main issue - I have an avi (230MB) that I need to play. How could I do it? Convert it to an .wmv/.mp4? Or can I play it as an avi without external plug ins?
I tried renaming it from .avi to .wmv, tried online converters but it still doesn't work.
Could the problem be the size? The format?
I usually have four versions of the same video for cross-browser
compatibly:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.flv" width="320" height="240">
</object>
</video>
.mp4, .webm, .ogv, and a flash fallback .flv. This has worked
well for me cross-browser. Another thing to note is that for mobile, a
higher-optimised .mp4 video is more likely to work (I've had issues
with this in the past).
Source: Making video tag play in all browsers
did you tried Video.js? It's open-source and cool.
In the <head>:
<link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.3/video.js"></script>
<style type="text/css">
.vjs-default-skin .vjs-control-bar { font-size: 60% }
</style>
In the <body>:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="my_video.mp4" type='video/mp4'>
<source src="my_video.webm" type='video/webm'>
</video>
Here you could find more.
I tried the following HTML for displaying a video. But I am not able to see video.
Its only loading the video, but not playing it. I'm using 'video.js' a JavaScript and CSS library which manipulates the video tag for a consistent UI.
If I am missing something please tell me.
Here is my code:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}" >
<source src="scroll_index.mp4" type='video/mp4'>
<source src="scroll_index.webm" type='video/webm'>
</video>
I have included above code in body tag and also included references to video.js and video.css in the head tag.
I don't know what browser you are testing with, perhaps it doesn't support the html5 video tag, but regarding your comment, I don't think so :)
However, you have neither set the controls attribute to make the control panel appear so user can manually start (and control) the video, nor set the autoplay attribute so that the video will play as soon as it is ready, so I suggest adding these attributes:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
autoplay="autoplay" controls="controls"
data-setup="{}">
<source src="scroll_index.mp4" type='video/mp4'>
<source src="scroll_index.webm" type='video/webm'>
</video>