Develop Reference

Two videos on one page carousel - Chromium

I have 2 vides hosted on a server.
In Chromium browser (Version 65.0.3325.181) https://server/index.html is loaded.
Using Javascript, 2 video elements are inserted after window.onload and the 1st one is started.
Both inserted like:
let video = document.createElement('video');
video.setAttribute('width', '100%');
video.setAttribute('height', '100%');
video.setAttribute('preload', 'auto');
let source = document.createElement('source');
source.setAttribute('src', <http://server/video/path>);
source.setAttribute('type', 'video/mp4');
video.appendChild(source);
After finish video.on('ended') video element becomes hidden. And next video element becomes visible and started.
Everything works fine:
2 video elements created and hidden.
Immediately 1st video element started and playing ..
On 1st video ended - it becomes hidden
Second video becomes visible and started ... successfully reach its end and becomes hidden again...
then start again from 1st video...
I have following observation.
First video is always playing smootly after initially cached.
Second video is always playing with glitches and freezes of few milliseconds.
I am using Chromium on Raspberry Pi 3.
When first video starts: CPU is like 40-50-60%
Everytime the second video starts: CPU is like 120-220% and with glitches and freezes.
The issue is not video or encoding related, because when i switch places: the new 2th video (which was 1st before) becomes the problematic one. Always the second video!
Why this can be?
Can you give me some clue or direction what it might be?

One possible reason is that the first video is using the Raspberry PI's built in Broadcom HW video decoding, but the second one is having to fall back to SW decoding.
The same affect can be seen on many computers if you play multiple videos and exceed what decoding the platform can handle in HW - a typical approach is to fall back on some form of SW decoding, or perhaps to simply give priority to the first video(s) playing.
There are also restrictions to the codec and frame rates supported on most video cards, although this does not sound like the issue you are seeing as the video sounds like it plays fine when it is the only or the first video.

Run javascript code each time a page is opened

I often find myself using this line of code on the console of the browser:
document.getElementsByTagName('video')[0].playbackRate = 1.5;
I use it so I can speed up a video (I just prefer to watch videos on a higher speed). Is there a way to make this line of code run on every web page I open. For example if I go to a youtube video, this line of code runs automatically. I know that YouTube already has buttons for speed, but some players don't have the UI for this and this is why I have to do this often. Thanks in advance :)

preventing console errors on fast transition between YouTube videos

I am creating a website where I am embedding a YouTube video on clicking some url's. The wrapper for the video is hidden initially, so I am displaying the wrapper on clicking on a url and then creating the player.
All is good, except that in case of fast transitions between url's, there are some errors thrown in the console which look like -
Uncaught TypeError: Object #<O> has no method 'cueVideoById'
Here is the sample code - http://jsfiddle.net/2b6bu7p4/2/
This happens only when I start clicking rapidly on the url's for the first time after page load. If I start on slowly, it works fine.
How can I fix this? Thanks in advance.

so a quick fix would be to make sure the player is ready before cueVideoById is called
function loadVideoOnClick(videoId) {
console.log('Loading');
if (player && player.cueVideoById) {
player.cueVideoById(videoId);
}
}
fiddle: http://jsfiddle.net/leighking2/2b6bu7p4/5/

JWPlayer : issue in stop and play using javascript

I am using jwplayer to play videos on my site. I want to implement this scenario :
A small thumb nail image represent the video.
when a user click on the thumb image the jwplayer div shows and starts to play and the thumb image will hide .
An external close button will allow to close the video. Then the thumb image will show again.
I am trying to accomplish it by using js.
The following is used to play the video:
jwplayer('container').play();
and this is used to stop the jwplayer:
jwplayer('container').stop();
The functions are working in chrome . But in firefox when I try to play the video in second time the jwplayer is in BUFFERING state. Also revert back to the placeholder image.
also shows an error sometime in console
Error: Permission denied to access property 'toString'
This is a sample jsfiddle demo
http://jsfiddle.net/35bGW/
Please help me to find a solution for this.
Thanks

YouTube now defaults to HTML5 mode as primary in 6.9.
There are some issues with setting up the player again with YouTube in HTML5 mode.
I have reported this as an issue to the player team here.
A work around, for now, is in your code, under this line:
stretching: 'exactfit',
Add:
primary: 'flash',
This should work around the issue for the time being.

jwplayer not playing video on some phones, error code 4

I am getting on one of android phones error from jwplayer:
Error playing media:
MediaError {
code 4
}
Tried to search what does it mean, but cannot find.
Video works on other android devices, and on desktop computers. Tried chrome and default browser in android.
Update
http://jsfiddle.net/HCH8Q/3/
jwplayer('myElement').setup({
file: 'http://video.oitlabs.com/dogs6_2mb/mr6d_1047.mp4',
// works
// file: 'http://videos-jp.jwpsrv.com/zWLy8Jer/videos/i8oQD9zd-1753142.mp4?77c801d752d5207784c49e7ed80fb953798fae0fcca03ecf79558597ab74bd0b969af6ee1babdc6fac893174bba3c1bbb98ef7c2e4c6b3c59a812b4ed2c9abb29c61117869dbacbbb7caced845a8994ff297cc03a4',
height: 360,
image: '/uploads/example.jpg',
width: 640
});
So video from their site works, but my video does not. But when I run that video not in jw player but directly in the address bar its url, it plays. So it means browser is able to play that video.
This happens btw on LG L7 P710 phone
Update:
Tried now to upload to my server the video from jw site, and it works on that phone.
http://jsfiddle.net/HCH8Q/5/
So this is encoding issue. Then the question comes - how should I solve it? I used Handbrake program to convert videos, it has many of settings but I am not sure what should I set to convert so it would work on every phone which supports mp4 files?
Update:
Finally made it work by this site instructions:
http://www.broken-links.com/2010/07/30/encoding-video-for-android/
The first is cross-platform, using Handbrake. What I did with this was to use the iPhone & iPod Touch preset, check the Web Optimized option, and change the Average bitrate option (in the Quality section) to ~1000kbps (you should then save this as a new preset called Android).
You’ll also need to change the size of the output video in the Picture Settings options — I changed mine to 480 wide (keeping the aspect ratio) and they came out really crisp and sharp. You can see the result of that below (if your browser supports it).
It looks like everything I done same earlier, except that I used much smaller kbps setting and picture size left default. Will later try to experiment which caused to make it work, because still it does not make sense for me how different bitrate or picture size can make it not work. It should be just affecting quality.
Update
Had another problem - when using handbrake and trying to convert many files at once, first file picture width gets converted to what I set, but other files - to the default, maybe some bug or something.
But then I tried another program - Freemake Video converter - it has various params and I tried convert 2 files at once, and were no problems, worked on that phone also.
http://www.freemake.com/free_video_converter/

MediaError { code 4 } is not a JW Player error.
I would recommend taking the video from our site, uploading it to your hosting, and then seeing if it still works. That way you can determine if the issue is encoding based, or a server side issue.