I am using videojs : http://videojs.com/
Can you guys please help me if I can play audio files using videojs library.
Example
<audio id="audio_example" class="video-js vjs-default-skin" controls preload="auto"
width="600" height="600" poster="/img/awesome-album-art.png" data-setup='{}'>
<source src="/audio/awesome-music.mp3" type='audio/mp3'/>
</audio>
Related
Stack:
"#ionic/vue": "^6.0.0",
"vue": "^3.2.21",
"#capacitor/cli": "3.3.4",
PROBLEM:
IOS: the video is not buffered. the user has to wait until the entire video is downloaded before playing it. the video is saved in vimeo platform.
ANDROID: this problem does not exist here
CODE:
<video controls>
<source src="https://player.vimeo.com/progressive_redirect/playback/111/rendition/1080p/file.mp4" type="video/mp4">
</video>
expected solution:
I would need to buffer this video. to start immediately after opening and loading the video part
Thanks for help.
you can use this:
<iframe src="https://player.vimeo.com/video/731378604?h=555b720291" width="640"
height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen></iframe>
<p><a href="https://vimeo.com/731378604">ADIDAS FT. RICK & MORTY - X
SPEEDPORTAL</a> from <a href="https://vimeo.com/user30235767">Elise
Hagedoorn</a> on Vimeo.</p>
I am working on a JS/HTML5 application that has to show the same video in two different places of the screen.
I can use any web browser I want - currently I am with Chrome.
Is it possible to display same video in two different places of the screen, or do I need to setup two different streaming sessions and take care of keeping them in sync?
Yes you can use same video src for two video players in the same page
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
For video player options below is the url
http://www.w3schools.com/tags/tag_video.asp
and you can test the example
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_autoplay
HTML
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
replace the html in w3schools Tryit Editor
I'm using video JS to embed a video, and using a javascript to call a function when the video is done playing.
The problem is that in ie8 and lower, it uses a flash fall back. Is there anyway to get the flash fallback to trigger some sort of 'on video ended' event?
Thanks!
Make sure you're using video.js's API rather than that of an HTML5 video element which may or may not be present. This works:
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://www.videojs.com/img/poster.jpg">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
<script>
//Forcing flash tech
videojs('MY_VIDEO_1',{"techOrder":["flash"]}).ready(function(){
this.on('ended', function(e){
alert('end');
})
});
</script>
My browser is Chrome. I know that to get it to autoplay, the attribute should just simply read "autoplay," but it isn't working.
<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay preload="auto" width="620" height="350" data-setup="{}">
<source src="http://x.com/something.mp4" type='video/mp4' />
</video>
Most browsers require the video to be initiated by the user or muted.
Try:
<video id="example_video_1" muted="muted" class="video-js vjs-default-skin" controls autoplay preload="auto" width="620" height="350" data-setup="{}">
<source src="http://x.com/something.mp4" type='video/mp4' />
</video>
I am evaluating video.js flash fallback capabilities for live streaming.
I can stream using either RTMP or Adobe HTTP Dynamic Streaming.
Hovewer, nonne of the options seems to be supported,
here is my demo set up
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://mysite.com:1935/live/android.stream/manifest.f4m" type="video/mp4" />
<source src="rtmp://mysite.com/live" type="video/mp4" />
<source src="http://mysite.com:1935/live/android.stream/playlist.m3u8" type='video/mp4' />
here is what I see in the firebug console
Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://mysite.com:1935/live/android.stream/manifest.f4m failed.
Specified "type" attribute of "video/mp4" is not supported. Load of media resource rtmp://mysite.com/live failed.
I went through the source code of the video.js (both JavaScript and ActionScript) and couldn't find any support for manifest files.
That is a feature I would also like to see...
Rtmp is now supported in video.js an example can be seen by using there already packaged file or this:
<!DOCTYPE html>
<html>
<head>
<title>Video.js</title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" data-setup='{ "techOrder": ["flash"] }'>
<!-- Stream testing -->
<source src="rtmp://rtmp.jim.stream.vmmacdn.be/vmma-jim-rtmplive-live/jim" type='rtmp/mp4'>
</video>
<p>Source from: http://support.akamai.com/flash/</p>
</body>
</html>
Hope this helps anyone currently stuck I know this has been dead for awhile.