I have successfully use videojs-youtube to embed youtube video on my page http://malescast.com/Eksis-dengan-HexoJS/instalasi-hexojs
As you can see there, the video is not HD. In Youtube https://www.youtube.com/watch?v=bujxtMQouZ4 I could watch the video in HD.
Currently my setup is like this:
<video
id="malescast-video"
poster="/img/poster/hexo-part-01.jpg"
class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="360"
data-setup='{ "techOrder": ["youtube"], "aspectRatio":"16:10", "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=bujxtMQouZ4"}], "Youtube": { "ytControls": 2 }}'
style="margin:auto;">
</video>
You can see it on the page.
I even change this to this:
<video
id="malescast-video"
poster="/img/poster/hexo-part-01.jpg"
class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="1280" height="800"
data-setup='{ "techOrder": ["youtube"], "aspectRatio":"16:10", "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=bujxtMQouZ4"}], "Youtube": { "ytControls": 2 }}'
style="margin:auto;">
</video>
But still doesn't work. How to fix this? Or, is it possible to show quality selector while using videojs controls? Thanks.
Within the plugin script there is a piece that passes options to fetch from YouTube iframe API, check it out:
var playerVars={controls:0,modestbranding:1,rel:0,showinfo:0,suggestedQuality:'default',setPlaybackQuality:'highres',loop:this.options_.loop?1:0};
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 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>
The code is:
<video controls="" autoplay="" name="media">
<source src="example.mp4" type="video/mp4">
</video>
but it didn't play on chrome ,and I've tried the code under:
if (window.chrome) {
$("[type=video\\\/mp4]").each(function () {
$(this).attr('src', $(this).attr('src').replace(".mp4", "_c.mp4"));
});
}
but it didn't work either. Does anyone has the same problem? Any solution?
How to use magnific-popup to retrieve and popup an html5 video from my server instead of getting the video from youtube, vimo, ...?
<video width="500" height="350" controls>
<source src="/static/video/bunny.mp4" type="video/mp4" />
Your browser does not support this video format.
</video>
Thanks.
I have got this to work using the following as a link to open the video:
<a class="popup-player" href="/static/video/bunny.mp4">
video link
</a>
and then used the Iframe type to display it:
$('.popup-player').magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false,
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div>',
srcAction: 'iframe_src',
}
});
This is a very basic version, it opens the video in an iframe but I have yet to work out how to change the things like the height and width. I'm still learning this stuff so I dont know how it works I just know it puts a video up on the screen. If you get it working and build a more complex version please let me know so I can improve my version.
This worked great for me. Uses "Inline" type with auto-starting HTML5 video.
Javascript:
$('.openVideo').magnificPopup({
type: 'inline',
callbacks: {
open: function() {
$('html').css('margin-right', 0);
// Play video on open:
$(this.content).find('video')[0].play();
},
close: function() {
// Reset video on close:
$(this.content).find('video')[0].load();
}
}
});
HTML:
<a href="#video-01" class="openVideo">
<div id="video-01" class="video-popup mfp-hide">
<video preload="false" poster="/videos/01.png">
<source src="/videos/01.mp4" type="video/mp4">
</video>
</div>
Original source: https://github.com/dimsemenov/Magnific-Popup/issues/626
I think that you should check basics first:
-if the path to plugin is correct and included correctly
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><br />
<!-- Magnific Popup core JS file --><br />
<script src="magnific-popup/jquery.magnific-popup.js"></script>
It’s not required, but we recommend placing CSS files in <head> and JavaScript files and initialization code in the footer of your site (before the closing </body> tag).
If you already have jquery.js on your site, don’t include it a second time, or use jQuery.noConflict(); mode. Optionally, you can include Zepto.js instead of jQuery, or choose which one to include based on browser support. ACCORDING->http://dimsemenov.com/plugins/magnific-popup/documentation.html
-if you have the movie on your server and if the path to it is correct.
/ is for getting into folder
Then JS:
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});
For more information see the link I putted few lines above
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>