Disable background video in resource constrained environments
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
For a web-based media player project, I'm experimenting with some subtle background video with a simple <video> tag, positioned behind other elements on the page. This is great on desktops and smart TVs, but I have no interest in taking CPU and battery on mobile devices and laptops on battery for this feature. For those devices, a static image is fine.
Is there any standard for indicating to the browser that a particular video element can be disabled if in a resource constrained environment? Ideally, something I can indicate that the video is not critical and let the browser decide whether to display it or not, based on user preferences or device properties.
html5-video
asked Nov 23 '18 at 19:11
BradBrad
117k29240399
add a comment |
For a web-based media player project, I'm experimenting with some subtle background video with a simple <video> tag, positioned behind other elements on the page. This is great on desktops and smart TVs, but I have no interest in taking CPU and battery on mobile devices and laptops on battery for this feature. For those devices, a static image is fine.
Is there any standard for indicating to the browser that a particular video element can be disabled if in a resource constrained environment? Ideally, something I can indicate that the video is not critical and let the browser decide whether to display it or not, based on user preferences or device properties.
html5-video
asked Nov 23 '18 at 19:11
BradBrad
117k29240399
Possible duplicate of Prevent HTML5 videos from downloading the files on mobile - videojs
– Alexandre Aimbiré
Nov 26 '18 at 19:04
@AlexandreAimbiré Not quite the same... Mobile is one thing, but I'm more curious about any existing standards for indicating that the video is optional and letting the user agent decide, based on battery, CPU, user preference, and possibly other factors.
– Brad
Nov 26 '18 at 20:02
Check this [link][1] [1]: stackoverflow.com/questions/9514179/… you may find you answer.
– Sukhjinder Singh
Dec 4 '18 at 11:39
How would would you define a "resource constrained environment"? Should a laptop with 10hrs battery life be taken differently as the same with 10min left? Should a machine running a 3d renderer and video editing and.. overall already eating 99% of CPU usage be taken differently than the same with just your web-app running? What when these factors change? To answer the question, no, there is no such standard being defined, all UAs do check is the network conditions for preloading of media.
– Kaiido
Dec 4 '18 at 12:16
@Kaiido I wouldn't define it specifically... I want the user agent to define it. I want to simply define unimportant things that the user agent can start throwing out the window when it wants to save resources. I assumed there was no standard for this, but figured I would throw it out there and ask around anyway. If you could post that as an answer, that there is no such standard, that would be great. Thanks!
– Brad
Dec 4 '18 at 15:22
add a comment |
For a web-based media player project, I'm experimenting with some subtle background video with a simple <video> tag, positioned behind other elements on the page. This is great on desktops and smart TVs, but I have no interest in taking CPU and battery on mobile devices and laptops on battery for this feature. For those devices, a static image is fine.
Is there any standard for indicating to the browser that a particular video element can be disabled if in a resource constrained environment? Ideally, something I can indicate that the video is not critical and let the browser decide whether to display it or not, based on user preferences or device properties.
html5-video
asked Nov 23 '18 at 19:11
BradBrad
117k29240399
For a web-based media player project, I'm experimenting with some subtle background video with a simple <video> tag, positioned behind other elements on the page. This is great on desktops and smart TVs, but I have no interest in taking CPU and battery on mobile devices and laptops on battery for this feature. For those devices, a static image is fine.
Is there any standard for indicating to the browser that a particular video element can be disabled if in a resource constrained environment? Ideally, something I can indicate that the video is not critical and let the browser decide whether to display it or not, based on user preferences or device properties.
html5-video
html5-video
asked Nov 23 '18 at 19:11
BradBrad
117k29240399
asked Nov 23 '18 at 19:11
BradBrad
117k29240399
edited Nov 29 '18 at 1:58
Brad
asked Nov 23 '18 at 19:11
BradBrad
117k29240399
asked Nov 23 '18 at 19:11
BradBrad
117k29240399
asked Nov 23 '18 at 19:11
BradBrad
117k29240399
117k29240399
Possible duplicate of Prevent HTML5 videos from downloading the files on mobile - videojs
– Alexandre Aimbiré
Nov 26 '18 at 19:04
@AlexandreAimbiré Not quite the same... Mobile is one thing, but I'm more curious about any existing standards for indicating that the video is optional and letting the user agent decide, based on battery, CPU, user preference, and possibly other factors.
– Brad
Nov 26 '18 at 20:02
Check this [link][1] [1]: stackoverflow.com/questions/9514179/… you may find you answer.
– Sukhjinder Singh
Dec 4 '18 at 11:39
How would would you define a "resource constrained environment"? Should a laptop with 10hrs battery life be taken differently as the same with 10min left? Should a machine running a 3d renderer and video editing and.. overall already eating 99% of CPU usage be taken differently than the same with just your web-app running? What when these factors change? To answer the question, no, there is no such standard being defined, all UAs do check is the network conditions for preloading of media.
– Kaiido
Dec 4 '18 at 12:16
@Kaiido I wouldn't define it specifically... I want the user agent to define it. I want to simply define unimportant things that the user agent can start throwing out the window when it wants to save resources. I assumed there was no standard for this, but figured I would throw it out there and ask around anyway. If you could post that as an answer, that there is no such standard, that would be great. Thanks!
– Brad
Dec 4 '18 at 15:22
add a comment |
Possible duplicate of Prevent HTML5 videos from downloading the files on mobile - videojs
– Alexandre Aimbiré
Nov 26 '18 at 19:04
@AlexandreAimbiré Not quite the same... Mobile is one thing, but I'm more curious about any existing standards for indicating that the video is optional and letting the user agent decide, based on battery, CPU, user preference, and possibly other factors.
– Brad
Nov 26 '18 at 20:02
Check this [link][1] [1]: stackoverflow.com/questions/9514179/… you may find you answer.
– Sukhjinder Singh
Dec 4 '18 at 11:39
How would would you define a "resource constrained environment"? Should a laptop with 10hrs battery life be taken differently as the same with 10min left? Should a machine running a 3d renderer and video editing and.. overall already eating 99% of CPU usage be taken differently than the same with just your web-app running? What when these factors change? To answer the question, no, there is no such standard being defined, all UAs do check is the network conditions for preloading of media.
– Kaiido
Dec 4 '18 at 12:16
@Kaiido I wouldn't define it specifically... I want the user agent to define it. I want to simply define unimportant things that the user agent can start throwing out the window when it wants to save resources. I assumed there was no standard for this, but figured I would throw it out there and ask around anyway. If you could post that as an answer, that there is no such standard, that would be great. Thanks!
– Brad
Dec 4 '18 at 15:22
Possible duplicate of Prevent HTML5 videos from downloading the files on mobile - videojs
– Alexandre Aimbiré
Nov 26 '18 at 19:04
Possible duplicate of Prevent HTML5 videos from downloading the files on mobile - videojs
– Alexandre Aimbiré
Nov 26 '18 at 19:04
@AlexandreAimbiré Not quite the same... Mobile is one thing, but I'm more curious about any existing standards for indicating that the video is optional and letting the user agent decide, based on battery, CPU, user preference, and possibly other factors.
– Brad
Nov 26 '18 at 20:02
@AlexandreAimbiré Not quite the same... Mobile is one thing, but I'm more curious about any existing standards for indicating that the video is optional and letting the user agent decide, based on battery, CPU, user preference, and possibly other factors.
– Brad
Nov 26 '18 at 20:02
Check this [link][1] [1]: stackoverflow.com/questions/9514179/… you may find you answer.
– Sukhjinder Singh
Dec 4 '18 at 11:39
Check this [link][1] [1]: stackoverflow.com/questions/9514179/… you may find you answer.
– Sukhjinder Singh
Dec 4 '18 at 11:39
How would would you define a "resource constrained environment"? Should a laptop with 10hrs battery life be taken differently as the same with 10min left? Should a machine running a 3d renderer and video editing and.. overall already eating 99% of CPU usage be taken differently than the same with just your web-app running? What when these factors change? To answer the question, no, there is no such standard being defined, all UAs do check is the network conditions for preloading of media.
– Kaiido
Dec 4 '18 at 12:16
How would would you define a "resource constrained environment"? Should a laptop with 10hrs battery life be taken differently as the same with 10min left? Should a machine running a 3d renderer and video editing and.. overall already eating 99% of CPU usage be taken differently than the same with just your web-app running? What when these factors change? To answer the question, no, there is no such standard being defined, all UAs do check is the network conditions for preloading of media.
– Kaiido
Dec 4 '18 at 12:16
@Kaiido I wouldn't define it specifically... I want the user agent to define it. I want to simply define unimportant things that the user agent can start throwing out the window when it wants to save resources. I assumed there was no standard for this, but figured I would throw it out there and ask around anyway. If you could post that as an answer, that there is no such standard, that would be great. Thanks!
– Brad
Dec 4 '18 at 15:22
@Kaiido I wouldn't define it specifically... I want the user agent to define it. I want to simply define unimportant things that the user agent can start throwing out the window when it wants to save resources. I assumed there was no standard for this, but figured I would throw it out there and ask around anyway. If you could post that as an answer, that there is no such standard, that would be great. Thanks!
– Brad
Dec 4 '18 at 15:22
add a comment |
2 Answers
2
active
oldest
votes
You can try to detect it with CSS and turn this off.
For example:
@media (max-width: 640px) {
video {
display: none;
}
}
Also you can try to detect platform using JavaScript:
navigator.platform
answered Dec 3 '18 at 23:34
Maciej BlMaciej Bl
35813
But there is no any other better way to detect if the site is displayed on mobile. You cannot check what kind of processor do the user have. You can ask for this info in some popup, but this would be useless in terms of user experience
– Maciej Bl
Dec 4 '18 at 11:52
I thought I made a comment on this question earlier, but apparently not. This answer doesn't answer the question. All you're doing here is detecting width of the screen in pixels. This has nothing to do with whether or not the client has plenty of CPU capability, is on battery, etc. Additionally, your suggestion isn't even a good way to detect mobile devices. My phone's screen has more pixels on it than my laptop, for example.
– Brad
Dec 4 '18 at 15:28
To clarify my question... I'm less looking for a way to determine system capability, and more looking for a way to indicate to the browser what elements are less important, that it can throw away if it needs to save power for whatever reason. I don't think this is possible, which is why i asked the question. If the answer is, "it isn't possible today", then that's a fine answer.
– Brad
Dec 4 '18 at 15:29
add a comment |
I'd do it with CSS, give your video tag an id and set display: none. After that, you set display to block when the min height increases.
Example:
#vid { display: none; }
@media screen and (min-width : 1024px) { #vid { display: block; } }
Be sure to write it in that order, the @media style rule needs to overwrite the first rule.
(keep in mind that this is written mobile-first)
answered Dec 5 '18 at 14:40
Van Aerschot BartVan Aerschot Bart
13
It appears SO stole my first # but gave me a heading in replace, dunno if this is a fair trade...
– Van Aerschot Bart
Dec 5 '18 at 14:43
If you indent your code by four spaces, it will put in a code block without extraneous formatting.
– Brad
Dec 5 '18 at 15:32
add a comment |
protected by Brad Dec 5 '18 at 15:32
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can try to detect it with CSS and turn this off.
For example:
@media (max-width: 640px) {
video {
display: none;
}
}
Also you can try to detect platform using JavaScript:
navigator.platform
answered Dec 3 '18 at 23:34
Maciej BlMaciej Bl
35813
But there is no any other better way to detect if the site is displayed on mobile. You cannot check what kind of processor do the user have. You can ask for this info in some popup, but this would be useless in terms of user experience
– Maciej Bl
Dec 4 '18 at 11:52
I thought I made a comment on this question earlier, but apparently not. This answer doesn't answer the question. All you're doing here is detecting width of the screen in pixels. This has nothing to do with whether or not the client has plenty of CPU capability, is on battery, etc. Additionally, your suggestion isn't even a good way to detect mobile devices. My phone's screen has more pixels on it than my laptop, for example.
– Brad
Dec 4 '18 at 15:28
To clarify my question... I'm less looking for a way to determine system capability, and more looking for a way to indicate to the browser what elements are less important, that it can throw away if it needs to save power for whatever reason. I don't think this is possible, which is why i asked the question. If the answer is, "it isn't possible today", then that's a fine answer.
– Brad
Dec 4 '18 at 15:29
add a comment |
You can try to detect it with CSS and turn this off.
For example:
@media (max-width: 640px) {
video {
display: none;
}
}
Also you can try to detect platform using JavaScript:
navigator.platform
answered Dec 3 '18 at 23:34
Maciej BlMaciej Bl
35813
But there is no any other better way to detect if the site is displayed on mobile. You cannot check what kind of processor do the user have. You can ask for this info in some popup, but this would be useless in terms of user experience
– Maciej Bl
Dec 4 '18 at 11:52
I thought I made a comment on this question earlier, but apparently not. This answer doesn't answer the question. All you're doing here is detecting width of the screen in pixels. This has nothing to do with whether or not the client has plenty of CPU capability, is on battery, etc. Additionally, your suggestion isn't even a good way to detect mobile devices. My phone's screen has more pixels on it than my laptop, for example.
– Brad
Dec 4 '18 at 15:28
To clarify my question... I'm less looking for a way to determine system capability, and more looking for a way to indicate to the browser what elements are less important, that it can throw away if it needs to save power for whatever reason. I don't think this is possible, which is why i asked the question. If the answer is, "it isn't possible today", then that's a fine answer.
– Brad
Dec 4 '18 at 15:29
add a comment |
You can try to detect it with CSS and turn this off.
For example:
@media (max-width: 640px) {
video {
display: none;
}
}
Also you can try to detect platform using JavaScript:
navigator.platform
answered Dec 3 '18 at 23:34
Maciej BlMaciej Bl
35813
You can try to detect it with CSS and turn this off.
For example:
@media (max-width: 640px) {
video {
display: none;
}
}
Also you can try to detect platform using JavaScript:
navigator.platform
answered Dec 3 '18 at 23:34
Maciej BlMaciej Bl
35813
answered Dec 3 '18 at 23:34
Maciej BlMaciej Bl
35813
answered Dec 3 '18 at 23:34
Maciej BlMaciej Bl
35813
answered Dec 3 '18 at 23:34
Maciej BlMaciej Bl
35813
35813
But there is no any other better way to detect if the site is displayed on mobile. You cannot check what kind of processor do the user have. You can ask for this info in some popup, but this would be useless in terms of user experience
– Maciej Bl
Dec 4 '18 at 11:52
I thought I made a comment on this question earlier, but apparently not. This answer doesn't answer the question. All you're doing here is detecting width of the screen in pixels. This has nothing to do with whether or not the client has plenty of CPU capability, is on battery, etc. Additionally, your suggestion isn't even a good way to detect mobile devices. My phone's screen has more pixels on it than my laptop, for example.
– Brad
Dec 4 '18 at 15:28
To clarify my question... I'm less looking for a way to determine system capability, and more looking for a way to indicate to the browser what elements are less important, that it can throw away if it needs to save power for whatever reason. I don't think this is possible, which is why i asked the question. If the answer is, "it isn't possible today", then that's a fine answer.
– Brad
Dec 4 '18 at 15:29
add a comment |
But there is no any other better way to detect if the site is displayed on mobile. You cannot check what kind of processor do the user have. You can ask for this info in some popup, but this would be useless in terms of user experience
– Maciej Bl
Dec 4 '18 at 11:52
I thought I made a comment on this question earlier, but apparently not. This answer doesn't answer the question. All you're doing here is detecting width of the screen in pixels. This has nothing to do with whether or not the client has plenty of CPU capability, is on battery, etc. Additionally, your suggestion isn't even a good way to detect mobile devices. My phone's screen has more pixels on it than my laptop, for example.
– Brad
Dec 4 '18 at 15:28
To clarify my question... I'm less looking for a way to determine system capability, and more looking for a way to indicate to the browser what elements are less important, that it can throw away if it needs to save power for whatever reason. I don't think this is possible, which is why i asked the question. If the answer is, "it isn't possible today", then that's a fine answer.
– Brad
Dec 4 '18 at 15:29
But there is no any other better way to detect if the site is displayed on mobile. You cannot check what kind of processor do the user have. You can ask for this info in some popup, but this would be useless in terms of user experience
– Maciej Bl
Dec 4 '18 at 11:52
But there is no any other better way to detect if the site is displayed on mobile. You cannot check what kind of processor do the user have. You can ask for this info in some popup, but this would be useless in terms of user experience
– Maciej Bl
Dec 4 '18 at 11:52
I thought I made a comment on this question earlier, but apparently not. This answer doesn't answer the question. All you're doing here is detecting width of the screen in pixels. This has nothing to do with whether or not the client has plenty of CPU capability, is on battery, etc. Additionally, your suggestion isn't even a good way to detect mobile devices. My phone's screen has more pixels on it than my laptop, for example.
– Brad
Dec 4 '18 at 15:28
I thought I made a comment on this question earlier, but apparently not. This answer doesn't answer the question. All you're doing here is detecting width of the screen in pixels. This has nothing to do with whether or not the client has plenty of CPU capability, is on battery, etc. Additionally, your suggestion isn't even a good way to detect mobile devices. My phone's screen has more pixels on it than my laptop, for example.
– Brad
Dec 4 '18 at 15:28
To clarify my question... I'm less looking for a way to determine system capability, and more looking for a way to indicate to the browser what elements are less important, that it can throw away if it needs to save power for whatever reason. I don't think this is possible, which is why i asked the question. If the answer is, "it isn't possible today", then that's a fine answer.
– Brad
Dec 4 '18 at 15:29
To clarify my question... I'm less looking for a way to determine system capability, and more looking for a way to indicate to the browser what elements are less important, that it can throw away if it needs to save power for whatever reason. I don't think this is possible, which is why i asked the question. If the answer is, "it isn't possible today", then that's a fine answer.
– Brad
Dec 4 '18 at 15:29
add a comment |
I'd do it with CSS, give your video tag an id and set display: none. After that, you set display to block when the min height increases.
Example:
#vid { display: none; }
@media screen and (min-width : 1024px) { #vid { display: block; } }
Be sure to write it in that order, the @media style rule needs to overwrite the first rule.
(keep in mind that this is written mobile-first)
answered Dec 5 '18 at 14:40
Van Aerschot BartVan Aerschot Bart
13
It appears SO stole my first # but gave me a heading in replace, dunno if this is a fair trade...
– Van Aerschot Bart
Dec 5 '18 at 14:43
If you indent your code by four spaces, it will put in a code block without extraneous formatting.
– Brad
Dec 5 '18 at 15:32
add a comment |
I'd do it with CSS, give your video tag an id and set display: none. After that, you set display to block when the min height increases.
Example:
#vid { display: none; }
@media screen and (min-width : 1024px) { #vid { display: block; } }
Be sure to write it in that order, the @media style rule needs to overwrite the first rule.
(keep in mind that this is written mobile-first)
answered Dec 5 '18 at 14:40
Van Aerschot BartVan Aerschot Bart
13
It appears SO stole my first # but gave me a heading in replace, dunno if this is a fair trade...
– Van Aerschot Bart
Dec 5 '18 at 14:43
If you indent your code by four spaces, it will put in a code block without extraneous formatting.
– Brad
Dec 5 '18 at 15:32
add a comment |
I'd do it with CSS, give your video tag an id and set display: none. After that, you set display to block when the min height increases.
Example:
#vid { display: none; }
@media screen and (min-width : 1024px) { #vid { display: block; } }
Be sure to write it in that order, the @media style rule needs to overwrite the first rule.
(keep in mind that this is written mobile-first)
answered Dec 5 '18 at 14:40
Van Aerschot BartVan Aerschot Bart
13
I'd do it with CSS, give your video tag an id and set display: none. After that, you set display to block when the min height increases.
Example:
#vid { display: none; }
@media screen and (min-width : 1024px) { #vid { display: block; } }
Be sure to write it in that order, the @media style rule needs to overwrite the first rule.
(keep in mind that this is written mobile-first)
answered Dec 5 '18 at 14:40
Van Aerschot BartVan Aerschot Bart
13
edited Dec 17 '18 at 10:54
answered Dec 5 '18 at 14:40
Van Aerschot BartVan Aerschot Bart
13
answered Dec 5 '18 at 14:40
Van Aerschot BartVan Aerschot Bart
13
answered Dec 5 '18 at 14:40
Van Aerschot BartVan Aerschot Bart
13
13
It appears SO stole my first # but gave me a heading in replace, dunno if this is a fair trade...
– Van Aerschot Bart
Dec 5 '18 at 14:43
If you indent your code by four spaces, it will put in a code block without extraneous formatting.
– Brad
Dec 5 '18 at 15:32
add a comment |
It appears SO stole my first # but gave me a heading in replace, dunno if this is a fair trade...
– Van Aerschot Bart
Dec 5 '18 at 14:43
If you indent your code by four spaces, it will put in a code block without extraneous formatting.
– Brad
Dec 5 '18 at 15:32
It appears SO stole my first # but gave me a heading in replace, dunno if this is a fair trade...
– Van Aerschot Bart
Dec 5 '18 at 14:43
It appears SO stole my first # but gave me a heading in replace, dunno if this is a fair trade...
– Van Aerschot Bart
Dec 5 '18 at 14:43
If you indent your code by four spaces, it will put in a code block without extraneous formatting.
– Brad
Dec 5 '18 at 15:32
If you indent your code by four spaces, it will put in a code block without extraneous formatting.
– Brad
Dec 5 '18 at 15:32
add a comment |
protected by Brad Dec 5 '18 at 15:32
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
Possible duplicate of Prevent HTML5 videos from downloading the files on mobile - videojs
– Alexandre Aimbiré
Nov 26 '18 at 19:04
@AlexandreAimbiré Not quite the same... Mobile is one thing, but I'm more curious about any existing standards for indicating that the video is optional and letting the user agent decide, based on battery, CPU, user preference, and possibly other factors.
– Brad
Nov 26 '18 at 20:02
Check this [link][1] [1]: stackoverflow.com/questions/9514179/… you may find you answer.
– Sukhjinder Singh
Dec 4 '18 at 11:39
How would would you define a "resource constrained environment"? Should a laptop with 10hrs battery life be taken differently as the same with 10min left? Should a machine running a 3d renderer and video editing and.. overall already eating 99% of CPU usage be taken differently than the same with just your web-app running? What when these factors change? To answer the question, no, there is no such standard being defined, all UAs do check is the network conditions for preloading of media.
– Kaiido
Dec 4 '18 at 12:16
@Kaiido I wouldn't define it specifically... I want the user agent to define it. I want to simply define unimportant things that the user agent can start throwing out the window when it wants to save resources. I assumed there was no standard for this, but figured I would throw it out there and ask around anyway. If you could post that as an answer, that there is no such standard, that would be great. Thanks!
– Brad
Dec 4 '18 at 15:22