How to change source video based Query String in JS
first im sorry if my english bad.
How To change CHANGE_THIS besed from ID query in video source by JS.
example : if i access "localhost/index.html?id=video" source will change from "/files/CHANGE_THIS/1080p" to "/files/video/1080p"
<head>
<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet">
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="poster.jpg" data-setup='"fluid": true'>
<source src="/files/CHANGE_THIS/1080p" type='video/mp4'>
</video>
<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
</script>
</body>
javascript
asked Nov 13 '18 at 22:24
Izul WahidinIzul Wahidin
11
add a comment |
first im sorry if my english bad.
How To change CHANGE_THIS besed from ID query in video source by JS.
example : if i access "localhost/index.html?id=video" source will change from "/files/CHANGE_THIS/1080p" to "/files/video/1080p"
<head>
<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet">
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="poster.jpg" data-setup='"fluid": true'>
<source src="/files/CHANGE_THIS/1080p" type='video/mp4'>
</video>
<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
</script>
</body>
javascript
asked Nov 13 '18 at 22:24
Izul WahidinIzul Wahidin
11
add a comment |
first im sorry if my english bad.
How To change CHANGE_THIS besed from ID query in video source by JS.
example : if i access "localhost/index.html?id=video" source will change from "/files/CHANGE_THIS/1080p" to "/files/video/1080p"
<head>
<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet">
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="poster.jpg" data-setup='"fluid": true'>
<source src="/files/CHANGE_THIS/1080p" type='video/mp4'>
</video>
<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
</script>
</body>
javascript
asked Nov 13 '18 at 22:24
Izul WahidinIzul Wahidin
11
first im sorry if my english bad.
How To change CHANGE_THIS besed from ID query in video source by JS.
example : if i access "localhost/index.html?id=video" source will change from "/files/CHANGE_THIS/1080p" to "/files/video/1080p"
<head>
<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet">
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="poster.jpg" data-setup='"fluid": true'>
<source src="/files/CHANGE_THIS/1080p" type='video/mp4'>
</video>
<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
</script>
</body>
javascript
javascript
asked Nov 13 '18 at 22:24
Izul WahidinIzul Wahidin
11
asked Nov 13 '18 at 22:24
Izul WahidinIzul Wahidin
11
asked Nov 13 '18 at 22:24
Izul WahidinIzul Wahidin
11
asked Nov 13 '18 at 22:24
Izul WahidinIzul Wahidin
11
asked Nov 13 '18 at 22:24
Izul WahidinIzul Wahidin
11
11
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
give the source id :
<source id="source" src="/files/CHANGE_THIS/1080p" type='video/mp4'>
then in javascript :
var url_string = window.location.href;
var url = new URL(url_string);
var c = url.searchParams.get("c");
document.getElementById("source").src="/files/"+c+"/1080p" //your source
answered Nov 13 '18 at 22:29
Sari MasriSari Masri
1297
add a comment |
First you want to grab the video element, which can be done with document.getElementById('my-video'). Then you want to grab the <source> element, which can be done with document.getElementsByTagName('source'). Note that this return a NodeList collection of all elements, even though there's only one in your example. As such, you'll need the first index, as document.getElementsByTagName('source')[0]. Finally, you simply want to set the .src of the source to be the .id of the video, plus what it was before.
This can be seen in the following:
const video = document.getElementById('my-video');
const source = document.getElementsByTagName('source')[0];
source.src = video.id + source.src;
console.log(source.src);<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="poster.jpg" data-setup='"fluid": true'>
<source src="/files/CHANGE_THIS_BY_QUERY/1080p" type='video/mp4'>
</video>Note that you'll likely want to remove the first /, as that denotes the root of the website. Depending on your folder layout, you'll probably want to add this slash in manually, by removing it from the original source and making use of source.src = video.id + / + source.src.
answered Nov 13 '18 at 22:30
Obsidian AgeObsidian Age
27.2k72344
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290436%2fhow-to-change-source-video-based-query-string-in-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
give the source id :
<source id="source" src="/files/CHANGE_THIS/1080p" type='video/mp4'>
then in javascript :
var url_string = window.location.href;
var url = new URL(url_string);
var c = url.searchParams.get("c");
document.getElementById("source").src="/files/"+c+"/1080p" //your source
answered Nov 13 '18 at 22:29
Sari MasriSari Masri
1297
add a comment |
give the source id :
<source id="source" src="/files/CHANGE_THIS/1080p" type='video/mp4'>
then in javascript :
var url_string = window.location.href;
var url = new URL(url_string);
var c = url.searchParams.get("c");
document.getElementById("source").src="/files/"+c+"/1080p" //your source
answered Nov 13 '18 at 22:29
Sari MasriSari Masri
1297
add a comment |
give the source id :
<source id="source" src="/files/CHANGE_THIS/1080p" type='video/mp4'>
then in javascript :
var url_string = window.location.href;
var url = new URL(url_string);
var c = url.searchParams.get("c");
document.getElementById("source").src="/files/"+c+"/1080p" //your source
answered Nov 13 '18 at 22:29
Sari MasriSari Masri
1297
give the source id :
<source id="source" src="/files/CHANGE_THIS/1080p" type='video/mp4'>
then in javascript :
var url_string = window.location.href;
var url = new URL(url_string);
var c = url.searchParams.get("c");
document.getElementById("source").src="/files/"+c+"/1080p" //your source
answered Nov 13 '18 at 22:29
Sari MasriSari Masri
1297
answered Nov 13 '18 at 22:29
Sari MasriSari Masri
1297
answered Nov 13 '18 at 22:29
Sari MasriSari Masri
1297
answered Nov 13 '18 at 22:29
Sari MasriSari Masri
1297
1297
add a comment |
add a comment |
First you want to grab the video element, which can be done with document.getElementById('my-video'). Then you want to grab the <source> element, which can be done with document.getElementsByTagName('source'). Note that this return a NodeList collection of all elements, even though there's only one in your example. As such, you'll need the first index, as document.getElementsByTagName('source')[0]. Finally, you simply want to set the .src of the source to be the .id of the video, plus what it was before.
This can be seen in the following:
const video = document.getElementById('my-video');
const source = document.getElementsByTagName('source')[0];
source.src = video.id + source.src;
console.log(source.src);<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="poster.jpg" data-setup='"fluid": true'>
<source src="/files/CHANGE_THIS_BY_QUERY/1080p" type='video/mp4'>
</video>Note that you'll likely want to remove the first /, as that denotes the root of the website. Depending on your folder layout, you'll probably want to add this slash in manually, by removing it from the original source and making use of source.src = video.id + / + source.src.
answered Nov 13 '18 at 22:30
Obsidian AgeObsidian Age
27.2k72344
add a comment |
First you want to grab the video element, which can be done with document.getElementById('my-video'). Then you want to grab the <source> element, which can be done with document.getElementsByTagName('source'). Note that this return a NodeList collection of all elements, even though there's only one in your example. As such, you'll need the first index, as document.getElementsByTagName('source')[0]. Finally, you simply want to set the .src of the source to be the .id of the video, plus what it was before.
This can be seen in the following:
const video = document.getElementById('my-video');
const source = document.getElementsByTagName('source')[0];
source.src = video.id + source.src;
console.log(source.src);<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="poster.jpg" data-setup='"fluid": true'>
<source src="/files/CHANGE_THIS_BY_QUERY/1080p" type='video/mp4'>
</video>Note that you'll likely want to remove the first /, as that denotes the root of the website. Depending on your folder layout, you'll probably want to add this slash in manually, by removing it from the original source and making use of source.src = video.id + / + source.src.
answered Nov 13 '18 at 22:30
Obsidian AgeObsidian Age
27.2k72344
add a comment |
First you want to grab the video element, which can be done with document.getElementById('my-video'). Then you want to grab the <source> element, which can be done with document.getElementsByTagName('source'). Note that this return a NodeList collection of all elements, even though there's only one in your example. As such, you'll need the first index, as document.getElementsByTagName('source')[0]. Finally, you simply want to set the .src of the source to be the .id of the video, plus what it was before.
This can be seen in the following:
const video = document.getElementById('my-video');
const source = document.getElementsByTagName('source')[0];
source.src = video.id + source.src;
console.log(source.src);<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="poster.jpg" data-setup='"fluid": true'>
<source src="/files/CHANGE_THIS_BY_QUERY/1080p" type='video/mp4'>
</video>Note that you'll likely want to remove the first /, as that denotes the root of the website. Depending on your folder layout, you'll probably want to add this slash in manually, by removing it from the original source and making use of source.src = video.id + / + source.src.
answered Nov 13 '18 at 22:30
Obsidian AgeObsidian Age
27.2k72344
First you want to grab the video element, which can be done with document.getElementById('my-video'). Then you want to grab the <source> element, which can be done with document.getElementsByTagName('source'). Note that this return a NodeList collection of all elements, even though there's only one in your example. As such, you'll need the first index, as document.getElementsByTagName('source')[0]. Finally, you simply want to set the .src of the source to be the .id of the video, plus what it was before.
This can be seen in the following:
const video = document.getElementById('my-video');
const source = document.getElementsByTagName('source')[0];
source.src = video.id + source.src;
console.log(source.src);<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="poster.jpg" data-setup='"fluid": true'>
<source src="/files/CHANGE_THIS_BY_QUERY/1080p" type='video/mp4'>
</video>Note that you'll likely want to remove the first /, as that denotes the root of the website. Depending on your folder layout, you'll probably want to add this slash in manually, by removing it from the original source and making use of source.src = video.id + / + source.src.
const video = document.getElementById('my-video');
const source = document.getElementsByTagName('source')[0];
source.src = video.id + source.src;
console.log(source.src);<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="poster.jpg" data-setup='"fluid": true'>
<source src="/files/CHANGE_THIS_BY_QUERY/1080p" type='video/mp4'>
</video>const video = document.getElementById('my-video');
const source = document.getElementsByTagName('source')[0];
source.src = video.id + source.src;
console.log(source.src);<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="poster.jpg" data-setup='"fluid": true'>
<source src="/files/CHANGE_THIS_BY_QUERY/1080p" type='video/mp4'>
</video>answered Nov 13 '18 at 22:30
Obsidian AgeObsidian Age
27.2k72344
answered Nov 13 '18 at 22:30
Obsidian AgeObsidian Age
27.2k72344
answered Nov 13 '18 at 22:30
Obsidian AgeObsidian Age
27.2k72344
answered Nov 13 '18 at 22:30
Obsidian AgeObsidian Age
27.2k72344
27.2k72344
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290436%2fhow-to-change-source-video-based-query-string-in-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
