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>
Related
I'm in charge of maintaining the website of a small foundation dedicated to video art.
On the homepage we used to have a few videos playing randomly when the user clicked on play.
But suddenly a while back it stopped working , the videos won't load on Chrome /Edge /Vivaldi while on Firefox it plays only the last video in the list ...
<div class="videosaccueil">
<section id="videos">
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video1.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video2.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video3.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video4.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video5.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video6.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video7.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video8.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video9.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video10.mp4"></video>
</section> <script><br />
(function () {<br />
"use strict";<br />
var videosSection = document.getElementById("videos");<br />
var videosSectionClone = videosSection.cloneNode();<br />
var videos = videosSection.getElementsByTagName("video");<br />
var randomVideo = videos.item(Math.floor(Math.random() * videos.length)).cloneNode(true);<br />
randomVideo.setAttribute("preload", "auto");<br />
videosSectionClone.appendChild(randomVideo);<br />
videosSection.parentNode.replaceChild(videosSectionClone, videosSection);<br />
randomVideo.play();<br />
})();<br />
</script>
</div>
I wasn't the one that made the random play code and I'm not practical enough to understand what went wrong so It would be really nice if someone can indicate to me how to fix the code if it's possible .
Thank you very much for your help .
I'm modifying a bit of code I found here from this question.
I am trying to get it working now for multiple instances of a video. This is the only way I can get it working but I would like to make it work for each instance that there is a video which changes on each page this applies on.
$( function() {
const bgv = $('.bgvid');
$('source', bgv).each(function() {
const el = $(this);
el.attr('src', el.data('src'));
});
bgv[0].load();
bgv[1].load();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
I have tried putting it within a loop like this instead of the bgv[0].load(); but it didn't work:
$('.bgvid').each(function(){
$(this).load();
});
Just call this.load(), don't convert the DOM element into a jQuery element.
$( function() {
const bgv = $('.bgvid');
$('source', bgv).each(function() {
const el = $(this);
el.attr('src', el.data('src'));
});
bgv.each(function() {
this.load();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
Firefox does not mute the video when the video element is cloned with jQuery.
JS:
$( document ).ready(function() {
var origin = $('.item-video');
var target = $('.clone');
origin.clone(true).appendTo(target);
origin.empty();fix
});
HTML:
<div class="item-video">
<video width="560" height="315" autoplay muted controls loop>
<source src="big-buck-bunny_trailer.webm" type="video/webm">
<!-- <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm"> -->
</video>
</div>
<div class="clone">
</div><div class="item-video">
<video width="560" height="315" autoplay muted controls loop>
<source src="big-buck-bunny_trailer.webm" type="video/webm">
<!-- <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm"> -->
</video>
</div>
<div class="clone">
</div>
jsfiddle
Any ideas how I can fix the bug on Firefox?
I don't know why this is happening on FF but this is the workaround
origin.clone(true).appendTo(target).find('video').attr('onloadedmetadata','this.muted =true');
I am developing an html5 player supports ads with video-js
Since i know it doesn't work in iOS, is it the same on Android?
So far i've tried these with no luck on autoplay in Android
HTML
<video id="inReadPlayer" autoplay loop="loop"
controls preload="auto" class="video-js vjs-default-skin" width="640"
height="360" > <source src="'+videoSource+'" type="video/mp4">
</video>
JS
var player = videojs('inReadPlayer', { /* Options */ }, function() {
this.play();
this.on('ended', function() {
});
});
Thanks in advance
Try this:
var videoplayer = document.getElementById('inReadPlayer')
videoplayer.addEventListener("load", function() {
videoplayer.play();
});
videoplayer.onended = function() {
source.setAttribute('src', 'MAINVIDEO.mp4');
};
<video id="inReadPlayer" autoplay loop="loop"
controls preload="auto" class="video-js vjs-default-skin" width="640"
height="360" > <source src="'+videoSource+'" type="video/mp4">
</video>
Note that this snippet won't work because there is no video source
I have set up some HTML audio on my site and I have set an autoplay function after a couple of seconds, however the sound seems to be loading twice? one starts playing straight after the other although, one is a ghost and cannot see a player for it.
How could I go about telling javascript not to start playing sounds if there are already sounds playing?
<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 2000)" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
The above issue has been solved however I wanted to add a flash fallback for this audio for internet explorer and so added:
<div id ="audio">
<script>var readingMusic = false; </script>
<audio controls="controls" loop="loop" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://www.alanis50.com/Music/music.mp3&autoPlay=true" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</audio>
</div>
<div id="audiohide">
<audio controls="controls" loop="loop" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://www.alanis50.com/Music/music.mp3&autoPlay=true" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</audio>
</div>
But now the flash audio is behaving how the previous audio did obviously the javascript is not affecting the flash embed?
Can't you have a boolean telling the browser if there is already some music playing ?
Example with 2 tags:
<script>var readingMusic = false; </script>
<audio controls="controls" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
<audio controls="controls" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
Well, that's a part of your jScript.js.
It seems that problem is in this line:
location = base + "/#" + current.replace(base, "");
You navigating to the new url without leaving current page(if origins are the same and the only difference is in hashes). I recommend you to start playing audio after changing location origin.
So you might place your autoplay logick right after this location changes.