Flowplayer shows 3 dots in chrome - javascript

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>

Related

Video Poster play at delay

I am trying to figure out how to play my 'animation' video at a delay. It needed to have a transparent background and no controller, so like a gif.
I figured video is the only solution, however now it's either running in a loop or running once.
Example image:
<div id="nee">
<video poster="" id="bgvid" playsinline muted>
<source src=" rendermirror.webm" type="video/webm">
<source src="rendermirror.mov" type="video/mp4">
</video>
Also tried using an interval, but i don't get it to work properly.
var video = document.getElementById("bgvid");
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
If anyone has any tips, would be really appreciated.
Cheers,
I pause the video when load and the video plays after 5s
var video = document.getElementById("myVideo");
// pause video event
video.pause();
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="myVideo" width="320" height="176">
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
if you want to loop the video then you will need to add change this
var video = document.getElementById("myVideo");
// pause video event
video.pause();
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="myVideo" width="320" height="176" loop>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>

HTML5 Video autoplay in Android

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

HTML / JavaScript Make a video play once a condition is met

For my website, I wanted a specific video to play, once a condition is met.
e.g (If x = 1, play the video)
I have this code in the HTML file:
<div id="video">
<video width="320" height="240" autoplay,>
<source src=video_mp4 type="video/mp4">
<source src=video_ogg type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
And in the JavaScript file:
document.getElementById("video").innerHTML.source.src = video_mp4;
document.getElementById("video").innerHTML.source.src = video_ogg;
But it doesn't seem to work.
You can use the following :
<video id="video1" src="vid.mp4"></video>
<script>
function playVideo(){
var video= document.getElementById("video1");
video.load();
video.play();
}
</script>

Video.js initial dimensions like video resolution

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/

Jquery Mobile single page app + video + dynamic changing video

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();
});
});​

Categories

Resources