so I have been having this problem for about a week or so now, and I think I have tried over 25 different ways to try and solve this, but I just can't seem to do it.
So my problem is this, I am starting a streaming website, and the files it uses to play on the website are around 1-2 gigabytes each (btw the videos are downloaded and loaded to the website locally). There is one video per page for each episode, but the thing is, the videos take about 10-15 minutes each to load and be playable.
I have tried to get video buffering working, video streaming working, and everything I could possibly think about to make these videos load faster, but I have always hit a dead end.
All the web browsers try to load the entire video all at once before it starts playing, and I'm trying to avoid this as it takes way to long to transfer and receive 1-2 gigabytes of data over the internet.
My thoughts are these:
Is there a way to slowly load the video as the person watches it?
Is there a way to load the video in fragments as the person watches it?
Here is the code for my webpage:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8^">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="with=device-width, inital-scale=1.0">
<title>Anime Alpha</title>
<link rel="stylesheet" href="../Episode Style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;600;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/920bf63c36.js" crossorigin="anonymous"></script>
</head>
<body>
<section class="header">
<nav>
<img src="../../graphics/logos&icons/Anime Alpha.png">
<div class="nav-links" id="navLinks">
<i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>WATCH</li>
<li>DONATE</li>
</ul>
</div>
<i class="fa-solid fa-bars" onclick="showMenu()"></i>
</nav>
<div class="container">
<div class="row">
<div class="playVideo">
<div class="episodeInfo">
<p class="name">A Certain Scientific Railgun</p>
<p class="episode">Episode 08</p>
</div>
<video autoplay controls id="animeMedia">
<source src="../../AnimeAlphaMedia\A Certain Scientific Railgun\Season 1\E08.mp4" type="video/mp4">
</video>
</div>
<div class="bottomBar">
Episode 1
Episode 2
Episode 3
Episode 4
Episode 5
Episode 6
Episode 7
Episode 8
Episode 9
Episode 10
Episode 11
Episode 12
Episode 13
Episode 14
Episode 15
Episode 16
Episode 17
Episode 18
Episode 19
Episode 20
Episode 21
Episode 22
Episode 23
Episode 24
</div>
</div>
</div>
<div class="videoDescription">
<h3>Video Description:</h3>
</div>
</section>
<script>
var navLinks = document.getElementById("navLinks")
var video = document.getElementById("animeMedia")
video.buffered.start(0);
video.buffered.end(0);
function hideMenu(){
navLinks.style.right = "-200px";
}
function showMenu(){
navLinks.style.right = "0px";
}
</script>
</body>
</html>
I would very very deeply appreciate any help towards this problem, thank you.
Comment by #Offbeatmammal
You need to either look at a fragmented MPEG solution (HLS or DASH) or if you want to keep a single file then if using MP4 encode it with the MOOV atom at the start (eg stackoverflow.com/questions/53537770/…) and make sure your server supports Byte Range Requests (MOOV atom contains the metadata that the browser can leverage to improve loading/playback, ie your option 2).
Related
How do I show the file name in view? Currently, I just hardcoded the name of the file on view.
Can someone assist me? thank you very much
Here my code:
<li>
#if (Model.Picture2 != null)
{
base2 = Convert.ToBase64String(Model.Picture2);
var picture2_data = base2.Substring(0, 5);
if (picture2_data == "JVBER")//PDF
{
var downloadTag = "PDPA" + Model.SenderID;
imgSrc2 = String.Format("data:application/pdf;base64,{0}", base2);
<br>
<a download=#downloadTag class="fa fa-file-pdf-o" style="font-size:18px;color:red" href=#imgSrc2></a>
<a download=#downloadTag href=#imgSrc2 title='PDPA'>PDPA</a>
<br />
}
else
{
base2 = Convert.ToBase64String(Model.Picture2); imgSrc2 = String.Format("data:image/gif;base64,{0}", base2);
<a class="fancybox-buttons" rel="fancybox-button" data-lightbox="button" href="#imgSrc2" title="PDPA"><img src="#imgSrc2" style="max-width:100px; max-height:100px;" alt="" /></a>
}
}
</li>
View
Your code has a few flaws and not exactly clear what your aiming for.
The parts that work would for a pdf look like this (however I am using a png for the pdf as its much faster/simpler as one line of data. It is not a good idea to have multiple references to a single dataURL only one should be needed.
this line works <a download=#downloadTag href=#imgSrc2 title='PDPA'>PDPA</a>
because it is PDPA
this one does not work
<a download=#downloadTag class="fa fa-file-pdf-o" style="font-size:18px;color:red" href=#imgSrc2></a>
because you have nothing visible between >hello world</a>
the last one more difficult to test but also same needs>something</a><
perhaps your aiming for something like
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='icon' href='https://css-tricks.com/favicon.svg' type='image/svg+xml'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<a href="data:application/pdf;base64,JVBERi0xLjcNJeLjz9MNCjEgMCBvYmoNPDwvUGFnZXMgMiAwIFIvVHlwZS9DYXRhbG9nPj4NZW5kb2JqDTMgMCBvYmoNPDwvQ3JlYXRpb25EYXRlKEQ6MjAxNTA3MDExMTI0NDcrMDInMDAnKS9DcmVhdG9yKFBERiBDcmVhdG9yIGh0dHA6Ly93d3cucGRmLXRvb2xzLmNvbSkvTW9kRGF0ZShEOjIwMjIwNjA3MTgzNjAyKzAyJzAwJykvUHJvZHVjZXIoMy1IZWlnaHRzXDIyMiBQREYgT3B0aW1pemF0aW9uIFNoZWxsIDYuMC4wLjAgXChodHRwOi8vd3d3LnBkZi10b29scy5jb21cKSk+Pg1lbmRvYmoNNCAwIG9iag08PC9Bbm5vdHMgMTMgMCBSL0NvbnRlbnRzIDUgMCBSL01lZGlhQm94WzAgMCA2MTIgNzkyXS9QYXJlbnQgMiAwIFIvUmVzb3VyY2VzPDw+Pi9UeXBlL1BhZ2U+Pg1lbmRvYmoNNSAwIG9iag08PC9MZW5ndGggMT4+DXN0cmVhbQogCmVuZHN0cmVhbQ1lbmRvYmoNOSAwIG9iag08PC9CQm94WzAgMCA2MTIgMTQ4XS9GaWx0ZXIvRmxhdGVEZWNvZGUvRm9ybVR5cGUgMS9MZW5ndGggNDEvUmVzb3VyY2VzPDwvUHJvY1NldFsvUERGIC9UZXh0IC9JbWFnZUIgL0ltYWdlQyAvSW1hZ2VJXS9YT2JqZWN0PDwvSW0wIDExIDAgUj4+Pj4vU3VidHlwZS9Gb3JtL1R5cGUvWE9iamVjdD4+DXN0cmVhbQp4nFMo5CrkMjM0UjBQMFAwNLEA08m5XPqeuQYKLvlcgVwKgQoAjFMHhQplbmRzdHJlYW0NZW5kb2JqDTExIDAgb2JqDTw8L0JpdHNQZXJDb21wb25lbnQgOC9Db2xvclNwYWNlL0RldmljZVJHQi9GaWx0ZXIvRmxhdGVEZWNvZGUvSFJlcyA5Ni9IZWlnaHQgMTE1L0xlbmd0aCA0NTI4L1NNYXNrIDEyIDAgUi9TdWJ0eXBlL0ltYWdlL1R5cGUvWE9iamVjdC9WUmVzIDk2L1dpZHRoIDQ3NT4+DXN0cmVhbQp4nO2da5LbuhGFuZjsIJX4zoh0eWl3DanYojRx7iYp2fOLaZB6i33QePCh8HylH/bM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"
button class="w3-btn w3-white w3-border w3-border-red w3-text-red w3-round-large"
Download="ABC.pdf" >Click me to Download<br>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFXUlEQVR4nO3d21LjOBRAUXuK//9lzxM9dIac+KLLkbRWVb80RQhBO0eOTdiP49iA3/3T+w5AZgKBwFfXr77v9ne9HMfe+y6MYG9+DCKK3ITzl3aBCGMsQtm2rVUg4hjX4qHUD0Qcc1g0FK9icc6+Hys+2dUNZMEHdHqL/UxNEK5bKBKBcM8ikdQLZJEHcGkL/IxNEJ6ZPBKB8NzEkQiEMiaNpO/Fiq8WPRlVVM+Fuu/HbD9DE2R1x7H/+VfCZJNEIPxHJP8jEP5WappMEolA+J1Itm0TCBGRCIQPFo9EIHy2cCQC4ZxFIxEI5y0YiUC4ZrFIBMJ1C0UiEO5ZJBKBcN8CkQiEZyaPRCA8N3EkAqGMSSMRCOVMGIlAKGuySARCeRNFIhDqmCQSgVDPBJEIhLoGj0Qg1DdwJAKhjUEjEQjtDBiJQGhrsEgEQnsDRSIQ+hgkEoHQzwCRCIS+kr8bvEDo72kkFaeIQMgh6SQRCHk8iaTSFBEIuSSbJAIhn7uRVJgiAoGAQMgpyRQRCHklOB4RCAQEAoGv3ndgSdE+ufW2IsEbI2RmgrT2aUFasKkIpCWLv42Cj7NAICCQ3o5jz/ByJr8TSCtXxr6tWBoCyejJRDGNihJITxZzegLJomQswitGIFmUPu4QSRECmZlIHhPI7LyM/IhrsVYxciT+/AHkJJAMnBhMSyA9CSM9gUBAIBAQSG+2WakJBAICaWXk8xALEwgEBAIBgWRjK5aKQCAgEAgIpCXbp+EIBAICgYBAICCQ1hyHDEUgEBAIBAQCAYFAQCAQEEhr/gTbUAQCAYFkZIqkIZCWLPzhCAQCAsnKtElBIK1Y8EMSSGai6k4gvfkDN6kJpIUnk8AU6UogWZgiKQmkp7NRmCLdCKS2K4s7CkYkXQgEAgKpKXrWfzctTJFUBJKRSNIQSC13pkeJ26YogWTlZd8UBJKZrVZ3Aqmh5vbq7NehCIFk9ykokVQlkNJqTA+RdCOQUZyJRCjFCaSk2sceZ25DJEUJZDQiaUogpbR65ers7dlyFSGQUV25VF4ot331vgNTaDk9Xm/77OLf9+PX+/IkngXO9gtkdFcjKend7U0Uji3WU72mR2YTbetMkNGMtPC+7+vATxQCeaLF9BgpiHfeHf8MQCDZzBDERARyV6npkT2IUu+8MugUEUgPNaKodYb95+dEX+P1Y9nDP0kgd9yZHqUWzJNn4e/PvXtfzsby/fEJIhFITVlPwv287RKxvLvtM/+fnECuOjM97iy6Xgvo6VR5NcHU+EkgV5T6C7UZn01LTJUJCaSVjFG8UzqWkb73FwI56+pCGXhR/OXJBY4TPAYCKWmCBXHKKt/nJpBzXJC4LFfzfuKAdWkC+c1Ce2xitlg//QzjUyTiWIJAts02irdssUY6601z6wby7tdCLX5+WDOQJ282IKClrHUM8vRCQ3EsZ50JYuFzwxoT5OyWSkS8mH+CiIMH5g7E+Q0emjeQKxPB9OCNOQMRB4XMF4g4KGi+QN6Z9H2bqGuuQDK89xRTmSuQd2ytuGmeQJzvoIJ5AjlDHFw0x6Umn6aH3w7kpvkniDh4YO5AxMFDcwcSEQcnzBHI1cUuDk6a4yB92/xGIFXME8i313cmFwUPzLHFekccPDR3IPCQQCAgEAgIBAICgYBAICAQCAgEAgKBgEAgIBAICAQCAoFArsvdvdshyZggEBAIBOoF4peV6KXg2jNBICAQCAgEAnUDcRxCa4XXnAnCPCo8IdcPxBRhYPtxNDx57Uw5NVR8Em67xTJNKK3ymmo7QWAwDtIhIBAICAQCAoGAQCAgEAgIBAICgYBAICAQCPwLH2kfzgOE8PAAAAAASUVORK5CYII="
width="100px" height="100px">
ABC.pdf</a>
you can replace the image with font icon
</body>
</html>
so like this but use pdf for first entry and an image or font icon for second,
<i class="fa fa-file-pdf-o" style="font-size:18px;color:red" aria-hidden="true"></i>
IF the files are on the server then on the server CPU you can program a means to provide custom icons
however converting just one pdf cover page to an image requires a powerful binary converter as javascript is limited and not always available. Here I can use a one line scripted conversion in irfanView without Ghost Script but most servers can run a single GS command
I am trying to grab the video element of a webpage and save the image locally.
In my code I have in my C# project:
this.webView.Source = new Uri( localhost:4000/watcher.html );
I'm running a local node server with javascript to display a video of a camera feed and in my watcher.html it looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Viewer</title>
<meta charset="UTF-8" />
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="controls">
<button id="button" onClick="changeCamera(0)">Camera One</button>
<button id="button2" onClick="changeCamera(1)">Camera Two</button>
</div>
<video playsinline autoplay muted></video>
<script src="/socket.io/socket.io.js"></script>
<script src="watch.js"></script>
</body>
</html>
My c# project loads the webpage fine, but How can I grab a picture of the video element and not get the entire screen? I created the following function below to take a picture of the entire screen just to test, it works, but I have no clue on how I can manipulate the webView2 to get my image. Any input on how to achieve this would be amazing. Thanks.
private void TakePicture(string fileName)
{
Bitmap screenGrab = new Bitmap( Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height, System.Drawing.Imaging.PixelFormat.Format32bppArgb );
Graphics g = Graphics.FromImage( screenGrab );
g.CopyFromScreen( Screen.PrimaryScreen.Bounds.Left, Screen.PrimaryScreen.Bounds.Top, 0, 0, screenGrab.Size, CopyPixelOperation.SourceCopy );
screenGrab.Save( fileName + ".jpg", ImageFormat.Jpeg );
}
P.S. I already explored trying to export the jpeg directly from my node server, I spent many many hours trying to get it to work and now I'm exploring other options.
I'm building a game to help kids to learn alphabets, the game is simple it will pronounce the letter and the user should choose the right letter between 3 different choices
the problem is that I can't autoplay the letter's audio file because of chrome autoplay policy which blocks autoplayed audio/video to avoid adds
one of the ways I found on google is inserting an audio/video tag on the HTML with fixed src, but that didn't work for me because audio's path would change with each new round
the other way is to set chrome flag autoplay to enable which affects my browser only but not the other users
is there a way on JS to avoid chrome's autoplay polices and make the audio file play automatically or I have to inject the audio's path into the audio tag with each new round?
<html lang='ar' dir="rtl">
<head>
<meta charset='UTF-8'>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' href='choose the right styles/style.css'>
<link rel='stylesheet' href='choose the right styles/queries.css'>
<link href="https://fonts.googleapis.com/css2?family=Amiri:wght#400;700&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<nav class="choose-the-right">
<div class="score-container">
<span class="score score-line"> score: <span class="score score-value"></span></span>
</div>
</nav>
<main class="container">
<div class="items-menu-div container">
<div class="bird-image">
<img id="bird" src="../resources/images/undraw_happy_music_g6wc.svg" alt="a bird wearing a headphone hearing alphabets">
</div>
<ul class="items-menu">
<li class="alpha-item">A</a></li>
<li class="alpha-item">B</a></li>
<li class="alpha-item">C</a></li>
</ul>
</div>
</main>
<script src="choose the right scripts/choose-game.js"></script>
</body>
</html>
window.addEventListener("load", init())
// DOM VARIABLES
const letterChoices = document.querySelectorAll(".alpha-item");
const bird = document.querySelector("#bird");
const path = document.querySelector("#src-path");
// PRIMITIVES VARIABLES
// const alphabets = ["أ","ب","ت","ث","ج","ح","خ","د","ذ","ر","ز","س","ش","ص",
// "ض","ط","ظ","ع","غ","ف","ق","ك","ل","م","ن","ه","و","ي"];
const alphabets = ["A","B",'C','D','E','F','G','H','I','J','K','L','M',
'N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
function init(){
let randomNum = Math.floor(Math.random()*alphabets.length);
let audio = new Audio(`../../resources/AR-alphabets/${randomNum}.mp3`);
audio.play();
}
You just cant play sound in browser unless user has interacted with it. I would suggest to add a start button which user can click thus satisfying the chrome security condition and it will play sound.
Also you should set audio.autoplay property to true
I'm trying to make my website check the screen resolution and replace installed font icons (using #webfont) with plain text links, so that the site is more mobile friendly. Im using Opera Mobile Emulator to check if it works. the user interface I am using clearly comes back with a res of 480x320 (in the very top left of the page), yet the .innerHTML javascript isn't firing off. Any help?
<!DOCTYPE html>
<html>
<head>
<title>Harry's Bar</title>
<meta name="keywords" content="Harry's, bar, st. petersburg, florida, kenneth city, drink specials" />
<meta name="description" content="Harry's Bar in St. Petersburg, Florida. Drink specials every night!" />
<meta name="author" content="Internet Solutions of Florida" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script type="text/javascript">
var width=screen.width;
var height=screen.height;
document.write(width+'x'+height);
if (width<700)
{document.getElementById("homelink").innerHTML="Home";}
</script>
<div class="frame">
<div class="header">
<img class="logo" src="img/logo.png" alt="Harry's Bar" />
<div class="menu">
<ul>
<li><a id="homelink" href="index.html" title="home"></a></li>
<li><a id="drinklink" href="drinks.html" title="drink menu"></a></li>
<li><a id="piclink" href="images.html" title="picture gallery"></a></li>
<li><a id="directionslink" href="directions.html" title="directions"></a></li>
<li><a id="contactlink" href="contact.html" title="contact us"></a></li>
</ul>
</div>
</div>
That javascript is executing before the HTML is being loaded. So there is no element with the id of "homelink" when the javascript fires.
Additionally, by using document.write, you're effectively overwriting your original HTML, so the tag will never load anyway.
Get rid of the document.write call and place the script just before your closing body tag and it should work as intended.
document.write() is not needed. If you want to diagnose you may use document.title or create a div and divid.innerHTML
Make sure your testing on a <700 area
Add a DOM ready fire.
Place this at the end of the
Things should work then :)
My programming skills are rudimentary at best, so please forgive me if I sound a little clunky discussing these things. I'm learning, but at a chimp's pace.
Here's my issue: I'm using JQuery Mobile to bring in some form content as a dialog via ajax. This content is contained in the document itself, in second div with a data-role="page" attribute.
Within that second page div, I have some javascript that defines a few vars, then writes them into the doc with document.write().
However, when I click the link (the far right link in the nav), instead of popping up a nice dialog, Firefox instead briefly loads a new page with the fist var (not dynamically but as a static page), then redirects back to the starting page, leaving a "wyciwyg(00000)..." in my browser history. Upon said redirect, "WYCIWYG" is displayed in the browser's title bar. Other browsers choke in slightly different ways (Safari doesn't redirect, Chrome displays all the vars and doesn't redirect, etc.), but the WYCIWYG-in-the-history factor is in play in all three. If I remove the document.write commands, the link behaves as expected.
I've scoured the web for hours and not found an answer... similar problems show up in 10 year old Mozilla bug reports, but not much else. The only resolution I've found is not to use document.write() in content loaded via ajax. Unfortunately, I have no clue what the alternative would be, or how I would even begin to execute it. The Javascript code originated at Google - front-end code for a transit trip planner.
Below is some stripped-down code that illustrates the issue. Any guidance would be greatly appreciated, bearing in mind the whole chimp's-pace thing. Thanks in advance.
<!DOCTYPE HTML>
<html>
<head>
<title>WYCIWYG</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile.structure-1.2.1.min.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<script type='text/javascript' src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script>
var startExample = "USC";
var endExample = "201 N Los Angeles St.";
var zip = "90012";
</script>
</head>
<body>
<div data-role="page">
<div data-role="navbar">
<ul data-mini="true">
<li>Service 1</li>
<li>Service 2</li>
<li>PLAN TRIP</li>
</ul>
</div>
</div>
<div data-role="page" id="planTrip">
Some document.write js:
<script>
document.write(startExample);
document.write(endExample);
document.write(zip);
</script>
</div>
</body>
You could simply use jQuery.html() on placeholder elements:
Source: http://jsfiddle.net/fiddlegrimbo/suD6s/6/
Demo: http://fiddle.jshell.net/fiddlegrimbo/suD6s/6/show/light/
<div data-role="page" id="planTrip">
Some document.write js:
<p id="start"></p>
<p id="end"></p>
<p id="zip"></p>
<script>
$("#planTrip #start").html(startExample);
$("#planTrip #end").html(endExample);
$("#planTrip #zip").html(zip);
</script>
</div>