Menu
I am trying to use video.js to maintain a consistent video skin across all platforms. The below code works for everything (chrome, firefox, ie, android) but safari on ios (haven't tested desktop version of safari). When attempting to play the video ios kicks over to it's default video player (quicktime?). This is a problem because I am looking to remove the video controls from the skin so that the user must watch the video. Is there a way to use video.js or another web plugin to be able to have a consistent video player UI across all platforms or will this not be possible for ios?
<html>
<head>
<!--#include virtual="/assets/inc/headcontent.htm" -->
<link href="http://vjs.zencdn.net/5.3.0/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-12 col-md-10 col-lg-8">
<div class="">
<video id="the_video" class="video-js" controls preload="auto">
<source src="videos/english.mp4" type='video/mp4'>
<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>
</div>
</div>
</div>
<!--#include virtual="/assets/inc/footcontent.htm" -->
<script src="http://vjs.zencdn.net/5.3.0/video.js"></script>
<script>
var player = videojs("the_video", {}, function(){
// Player (this) is initialized and ready.
}).ready(function(){
console.log(this.options()); //log all of the default videojs options
// Store the video object
var myPlayer = this, id = myPlayer.id();
// Make up an aspect ratio
var aspectRatio = 264/640;
function resizeVideoJS(){
var width = document.getElementById(id).parentElement.offsetWidth;
myPlayer.width(width).height( width * aspectRatio );
}
// Initialize resizeVideoJS()
resizeVideoJS();
// Then on resize call resizeVideoJS()
window.onresize = resizeVideoJS;
});
</script>
</body>
</html>
554
Video. js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and modern streaming formats, as well as YouTube, Vimeo, and even Flash (through plugins, more on that later).
Due to the hard work of hundreds of contributors Video. js has become a safe player pick for those who seek a free extendable playback tool. And here lies the main advantage of this player – it has plug-ins and add-ons to support everything, including all three main DRMs – Widevine, PlayReady, and FairPlay.
JS is an open-source JavaScript video player.
Starting in iOS 9 and above you can now add the playsinline attribute to the video tag to get it to play inline. https://webkit.org/blog/6784/new-video-policies-for-ios/ And I just tested and it works with video.js
<video class="video-js" poster="#" playsinline autoplay loop>
<source src="#" type="video/mp4">
</video>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
