I am using videoJs for showing the video.
HTML
<video id="player-vjs_html5_api" class="vjs-tech" crossorigin="anonymous" preload="auto" src="http://path-to-video/small.mp4">
<p class="vjs-no-vjs">Your browser does not support video.</p>
</video>
Javascript
loadMedia: function(path) {
player.src(path);
return void 0;
}
It works perfectly when i used .webm but i tried with mp4 i got following error
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.
I tried following too but it doesn't work
<video id="player-vjs_html5_api" class="vjs-tech" crossorigin="anonymous" preload="auto">
<source src="" type="video/mp4" />
<source src="" type="video/webm" />
<source src="" type="video/ogv" />
<p class="vjs-no-vjs">Your browser does not support video.</p>
</video>
and
loadMedia: function(path) {
player.src([
{ type: "video/mp4", src: path+".mp4" },
{ type: "video/webm", src: path+".webm" },
{ type: "video/ogg", src: path+".ogv" }
]);
return void 0;
}
but it didn't work too.
It works when i did following changes. just removed crossorigin="anonymous"
<video id="player-vjs_html5_api" class="vjs-tech" preload="auto">
<source src="" type="video/mp4" />
<source src="" type="video/webm" />
<source src="" type="video/ogv" />
<p class="vjs-no-vjs">Your browser does not support video.</p>
</video>
javascript
loadMedia: function(path) {
player.src([
{ type: "video/mp4", src: path+".mp4" },
{ type: "video/webm", src: path+".webm" },
{ type: "video/ogg", src: path+".ogv" }
]);
return void 0;
}
Related
i came a crosss very different problem, in fullscreen mode my plyrjs is not playing video to fullscreen
i tried to reproduce the problem with same code in codepen but it works in codepen why?.
Question: why same code produces fullscreen in codepen but not in my project, in any browser.
here is screen shot (played in fullscreen mode in my project):
**
var videoPlayer = new Plyr('#plyr-video');
var src = 'https://vjs.zencdn.net/v/oceans.mp4';
videoPlayer.source = {
type: 'video',
title: 'Example title',
sources: [
{
src: src,
type: 'video/mp4',
size: 720
}
],
poster: ''
};
<link href="https://cdn.plyr.io/3.4.7/plyr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script>
<video controls crossorigin playsinline id="plyr-video" controlsList="download" controls style="max-width: 533px;max-height: 300px;">
<source src="" type="video/mp4">
<source src="" type="video/webm">
<track kind="captions" label="English captions" src="" srclang="en" default>
</video>
Codepen demo:https://codepen.io/eabangalore/pen/wRdGGB
Make sure your <link and <script import statements are declared early on in your code.
<link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css" />
<script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script >
I am facing a strange error while trying to integrate video.js in my angular app.
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"
width="300" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
<source src="http://d2bqeap5aduv6p.cloudfront.net/project_coderush_640x360_521kbs_56min.mp4" type='video/mp4' />
</video>
Above code is working fine for me. But when I declare the url of video in controller, it is giving me following error
Here is the code of views
<video id="example_video_2" class="video-js vjs-default-skin" controls preload="none"
width="300" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
<source src="{{video_link}}" type='video/mp4' />
</video>
And here is my controller
app.controller('IndexCtrl', function ( $scope, $location, $http,$sce,$routeParams) {
angular.element(document).ready(function () {
//$scope.getVideos();
$scope.video_link = "http://d2bqeap5aduv6p.cloudfront.net/project_coderush_640x360_521kbs_56min.mp4";
});
})
Can any one explain why I am getting this error?
Src is not working with angular syntax use ng-src instead of.
<source ng-src="{{video_link}}" type='video/mp4' />
Here what I did in my application controller:
$scope.generateSrc = function (file, mediaType) {
if (!!file) {
return '/media/conversation/' + mediaType + '/' + file;
}
};
In template
<video poster="{{generateSrc(mediaPoster, 'photo')}}" width="100%" height="100%" class="hzVideoPlayer" id="v_{{vId}}" preload="auto" loop>
<!--MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7-->
<source ng-src="{{generateSrc(mediaUrl, 'video')}}" type="video/mp4" data-quality="high">
<source ng-src="{{generateSrc('SD_'+mediaUrl, 'video')}}" type="video/mp4" data-quality="low">
<!-- WebM/VP8 for Firefox4, Opera, and Chrome-->
<source ng-src="{{generateSrc(mediaUrl, 'video')}}" type="video/webm" data-quality="high">
<source ng-src="{{generateSrc('SD_'+mediaUrl, 'video')}}" type="video/webm" data-quality="low">
<!-- Flash fallback for non-HTML5 browsers without JavaScript-->
<object width="320" height="240" type="application/x-shockwave-flash" data="/media/flashmediaelement.swf">
<param name="movie" value="/media/flashmediaelement.swf"/>
<param name="flashvars" value="controls=true&file={{generateSrc(mediaUrl, 'video')}}"/>
<!-- Image as a last resort -->
<img ng-src="{{generateSrc(mediaPoster, 'photo')}}" width="320" height="240" title="No video playback capabilities"/>
</object>
</video>
I use video.js library from: https://github.com/videojs/video.js and i have one issue.
Is it possible to make initial payer dimensions like video resolution if width/height settings not set(for both, html5 & flash video.js mode)?
Native html5 player is ok.
Code presentation example:
html
<video id="really-cool-video-native" controls preload="auto">
<source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
<video id="really-cool-video-html5" class="video-js vjs-default-skin">
<source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
<video id="really-cool-video-flash" class="video-js vjs-default-skin">
<source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
JS:
videojs.options.flash.swf = "//vjs.zencdn.net/c/video-js.swf";
videojs("really-cool-video-html5", {
controls : true,
techOrder : ["html5", "flash"]
}, function() {
});
videojs("really-cool-video-flash", {
controls : true,
techOrder : ["flash", "html5"]
}, function() {
});
CSS:
#really-cool-video-native{
width: 100%;
}
URL: https://jsfiddle.net/msthxLkb/
I'm using the commercial version of flowplayer, the player works fine in FF and IE, but in Chrome when I jump in the stream 3 loading white dots appear and don't go away although the video finished loading
<div id="player" class="avPlayer-wrap customFlowPlayer">
<video preload="none">
<source src="video.mp4" type="video/mp4"/>
<source src="video.ogv" type="video/ogg"/>
</video>
</div>
<script>
$(function () {
$("#player").flowplayer({
playlist: [
[
{ mp4: "video.mp4" },
{ ogg: "video.ogv" }
]
],
swf: "//releases.flowplayer.org/5.4.6/commercial/flowplayer.swf",
key: '${playerKey}'
});
});
</script>
Has anybody found a robust way to change the source of a video element dynamically and make it work on Iphone? My testing works fine in Chrome, but I can not make it work consistently. Any suggestions on strategy or player is welcome, so it will work on any device.
I have a video element:
<video id="player1" width="320" height="240" preload controls>
<source src="http://dev.swinginsam.com/_files/testvid_01.mp4" />
<source src="http://dev.swinginsam.com/_files/testvid_01.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://dev.swinginsam.com/_files/testvid_01.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://dev.swinginsam.com/_files/testvid_01.mp4", "autoPlay":false, "autoBuffering":true}}' />
<p>Download video as
MP4,
WebM, or Ogg.</p>
</object>
</video>
And a snippet of code for initalizing the player I use mediaelementjs - it works in the sence that the player is correcly initialized and skinned and works for the first video:
$('#one').live("pageinit", function (event, data) {
var player1 = new MediaElementPlayer('#player1',{});
$('#button1').click(function(){
player1.pause();
player1.setSrc([
{src:"http://dev.swinginsam.com/_files/testvid_01.mp4"},
{src:"http://dev.swinginsam.com/_files/testvid_01.webm", type:'video/webm; codecs="vp8, vorbis"'},
{src:"http://dev.swinginsam.com/_files/testvid_01.ogv", type:'video/ogg; codecs="theora, vorbis"'}
]);
$('#button2').click(function(){
player1.pause();
player1.setSrc([
{src:"http://dev.swinginsam.com/_files/testvid_02.mp4"},
{src:"http://dev.swinginsam.com/_files/testvid_02.webm", type:'video/webm; codecs="vp8, vorbis"'},
{src:"http://dev.swinginsam.com/_files/testvid_02.ogv", type:'video/ogg; codecs="theora, vorbis"'}
]);
player1.load();
});
});
Problems begin when you press the buttons and begin to change the source. It works in Chrome but Safari just continues to play the first video.
You are missing the closing parenthesis }); for your $('#button1').click(function(){. The javascript should be :
$('#one').live("pageinit", function(event, data) {
var player1 = new MediaElementPlayer('#player1', {});
$('#button1').click(function() {
player1.pause();
player1.setSrc([
{
src: "http://dev.swinginsam.com/_files/testvid_01.mp4"},
{
src: "http://dev.swinginsam.com/_files/testvid_01.webm",
type: 'video/webm; codecs="vp8, vorbis"'},
{
src: "http://dev.swinginsam.com/_files/testvid_01.ogv",
type: 'video/ogg; codecs="theora, vorbis"'}
]);
});
$('#button2').click(function() {
player1.pause();
player1.setSrc([
{
src: "http://dev.swinginsam.com/_files/testvid_02.mp4"},
{
src: "http://dev.swinginsam.com/_files/testvid_02.webm",
type: 'video/webm; codecs="vp8, vorbis"'},
{
src: "http://dev.swinginsam.com/_files/testvid_02.ogv",
type: 'video/ogg; codecs="theora, vorbis"'}
]);
player1.load();
});
});