I am trying to play a video when developing locally with VueJS 2.
My code is the following :
<video class="back_video" :src="`../videos/Space${videoIndex}.mp4`" id="background-video"></video>
...
data :
function() {
return {
videoIndex:1
}
}
...
const vid = document.getElementById("background-video");
vid.crossOrigin = 'anonymous';
let playPromise = vid.play();
if (playPromise !== undefined) {
playPromise.then(function() {
console.log("video playing");
}).catch(function(error) {
console.error(error);
});
}
This code is causing the exception given in title. Tried in several browsers, always the same.
If I change the src by :
:src="require(`../videos/Space${videoIndex}.mp4`)"
it works.
But in that case building time is very long as I have many different videos in my videos directory, because adding require() will force to copy all videos in the running directory at build phase (vue-cli serve), and this is really annoying. In other words I want to refer videos that are outside the build directory to avoid this (but also to avoid having videos in my git).
It is interesting to note that when I deploy server side, it works perfectly with my original code
:src="`../videos/Space${videoIndex}.mp4`"
Note also that if i replace my code with simply
src="../videos/Space1.mp4"
it works too. So the video itself, or its location, are not the source of the problem.
Any clue ?
You can host your videos on a CDN to have something faster and easier to debug/work with.
Otherwise, it will need to bundle it locally and may take some time.
I created an app with vue-cli and then I build the dist folder for production.
The app is deployed on IIS with flask backend and works fine.
The problem occurs when I have to make some changes and I have to redo the deployment. After this, users call me because app doesn't work but if I clear the chrome cache, the app works fine again.
How can I fix this problem? Is there a method to clear chrome cache automatically when I release a new application version?
Thanks
my dist folder
deployment: copy and paste folder dist on IIS
if files in dist folder are correct, maybe the problem is in axios cache? i have make some changes also to rest apis
I had the same problem and changing (incrementing) the version number in package.json before running the build command fixed it.
For example by default the version number is set to "0.1.0"
package.json file:
{
"name": "project-name",
"version": "0.1.1",
"private": true,
...
}
If you use vue-cli, then it has built-in webpack configs for building dist. And in fact it adds hash-names to output files.
But if it was removed somehow, you can add it back to webpack config like
output: {
filename: '[name].[hash].bundle.js'
}
And your app will looks like this:
And even more, you do not need to handle how all this stuff will be added to html, coz webpack will figure it out for you.
You need to add a version query to your js file. This is how a browser can know if the file has changed and needs to download the new version.
So something like:
<script src="main.js?v=1.1"></script>
<script src="main.js?v=1.2"></script>
etc...
Assuming this is nothing to do with service worker/PWA, the solution could be implemented by returning the front-end version.
axiosConfig.js
axios.interceptors.response.use(
(resp) => {
let fe_version = resp.headers['fe-version'] || 'default'
if(fe_version !== localStorage.getItem('fe-version') && resp.config.method == 'get'){
localStorage.setItem('fe-version', fe_version)
window.location.reload() // For new version, simply reload on any get
}
return Promise.resolve(resp)
},
)
You can also ensure the fe-version is returned based on any sort of uniqueness, here I have used the commit SHA.
Full Article here: https://blog.francium.tech/vue-js-cache-not-getting-cleared-in-production-on-deploy-656fcc5a85fe
You can't access the browser's cache, that would be huge a security flaw.
To fix it, you must send some headers with your flask responses telling the browser not to cache you app.
This is an example for express.js for you to get the idea:
setHeaders: function (res, path, stat) {
res.set('Cache-Control', 'no-cache, no-store, must-revalidate') // HTTP 1.1
res.set('Pragma', 'no-cache') // HTTP 1.0
res.set('Expires', '0') // Proxies
}
You can read a lot more about caching in here.
This is an older post, but since I could not find the solution for this problem online, ill just post this here in case someone else might find it usefull.
I added the hash to the appllication chunk files via the webpack.mix.js file by adding:
mix.webpackConfig({
output: {
chunkFilename: 'js/[name].js?id=[chunkhash]',
},
})
This adds a fingerprint to the actual chunks and not just the app.js file. You can add a version name to the app.js file aswell by adding version(['public/js/app.js']); at the end of the file, or add filename: '[name].js?[hash]' to the output block.
My complete webpack.mix.js:
const mix = require('laravel-mix');
mix.webpackConfig({
output: {
chunkFilename: 'js/main/[name].js?id=[chunkhash]',
}
}).js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]).version(['public/js/app.js']);
In my laravel blade file I used
<script src="{{ mix('js/app.js') }}"></script>
to load the app.js file with the correct version fingerprint.
The answer for me was caching at my DNS provider level.
Basically, I'm using Cloudflare DNS proxy and they are caching the website so in development mode I was not getting the code updates.
I had to clear the cache many times to get anything to change. I had to wait a significant period of time before anything update.
Turned it off and it stopped doing that.
the method I want to suggest
<script src="{{ asset('js/app.js?time=') }}{{ time() }}" defer></script>
add below script in publc/index.html
<head>
...
<script type="text/javascript" language="javascript">
var timestamp = (new Date()).getTime();
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "<%= BASE_URL %>sample.js?t=" + timestamp;
document.head.appendChild(script);
</script>
...
</head>
could you try ?
vm.$forceUpdate();
Also it's possible that the component it self needs a unique key :
<my-component :key="unique" />
I use Muse and I want to be able to share the current URL dynamically. I have achieved this with Facebook and Twitter. However Google Plus is still evading me.
This is the JS code I have been working with.
<script language="javascript">
function gplussharecurrentpage() {
sharelink = "https://plus.google.com/share?url={URL}"+url;
newwindow=window.open(sharelink,'name','height=400,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
var url="www.google.co.uk";
googleplusbtn(url);
</script>
I have a button linked to activate the script however it comes back with a this link is not valid.
Any ideas?
i've got two PHP projects in which i use the Google Maps Api to convert adress data into geo coordinates. The first project uses this code (i post ir here in a shorted version) and works:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function latlong(adresse) {
geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode( { 'address': adresse}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// I NEVER GET IN HERE with my second project
alert("It works!");
} else {
alert('It works not');
}
});
}
}
// Start Converting
latlong('teststreet 10, 91578 Leuterhausen');
As you can see, i don't use an API Key in this section
<script src="https://maps.googleapis.com/maps/api/js"></script>
but it works anyway (Alert box "It works" is shown).
Now i have built another project with the same code but it does not work (Alert Box "It works not" is shown).
Do you have any idea...
...why the first project works WITHOUT an API key?
...what i have to change in the code so that the second project works?
When i use this code in the header
<script src="https://maps.googleapis.com/maps/api/js?key=[here i place in my key]"
async defer></script>
i get the error message: "Google Maps API error: ApiNotActivatedMapError https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error"
How can i activate the key?
Every help is appreciated.
Best regards
Daniel
If the app has been running before google enforced the use of API keys the app should still run, apps published after the change will require the key ...read here : https://developers.google.com/maps/pricing-and-plans/standard-plan-2016-update
I'm having trouble hooking up the F1 help function in AutoCAD Lisp with a custom Youtube video instead of showing the default AutoCAD Help files. I've found this article to be quite helpful, but it won't allow me to supply a youtube video in any way.
The custom AutoCAD browser is too old and does not support HTML5 (which is needed to run Youtube videos). Any help on how to solve my issue?
Case: How to bind the F1 help to a custom function in AutoCAD Lisp, then activate a Youtube clip on F1 keypress.
After a while, I got it all figured out. I had to use a combination of HTML/Javascript to trigger the default web browser (which hopefully supports HTML5), and then view the Youtube clip there:
Lisp:
(setfunhelp "C:MyFunction" "C:\\path\\to\\html\\file\\MyFunc_Help.html")
(defun C:MyFunction ()
(alert "this is my function")
)
HTML:
<html>
<body>
<script>
function OpenInNewTab(url, callback) {
var acWindow = window.open("", "_self");
acWindow.document.write("");
setTimeout (function() {acWindow.close();},500);
var newWindow = window.open(url, '_blank');
newWindow.focus();
}
OpenInNewTab("https://youtu.be/FERNTAh5s0I");
</script>
</body>
</html>
This HTML code opens a new browser window in your default browser, then closes the AutoCAD default browser after 500 milliseconds.
I hope this will be of help to someone.