Here is the Development site: legiondesigns.com/pauls
And I also posted a previous question here Loading HTML Video With jQuery and that was working for a few days then it just stopped working. I am using WordPress 4.2.2 so I know that I have to use "wp_localize_script" which I have done. Because when you inspect the video element in chrome you can see that it is proper loading in the correct path. I can even right click the link in the inspection tool and click "open link in new window" and it opens the video and starts playing it. So I know that the link is correct and the "wp_localize_script" is working properly. But nothing is showing up except the poster image for the video.
When Looking at the debug console in firefox I see the message: "Invalid URI. Load of media resource failed (3). So firefox is saying that it failed to load my videos. When I switch from console back to "inspector" in developer tools and find the video elements. It is showing the correct location and I can also copy that and paste it into a new window and the video comes up and plays. So I don't even see why firefox is giving me that error.
Here is my WordPress Localization PHP:
$site_parameters = array(
'site_url' => get_site_url(),
'theme_directory' => get_template_directory_uri()
);
wp_localize_script('custom-js', 'SiteParameters', $site_parameters );
Here is my jQuery:
var v = [];
v[0] = ["/library/videos/header.webm", "/library/videos/header.ogv", "/library/videos/header.mp4"];
v[1] = ["/library/videos/mobHead.webm", "/library/videos/mobHead.ogv", "/library/videos/mobHead.mp4"];
var index = window.innerWidth <= 641 ? 1 : 0;
$('#webmvid').attr('src', SiteParameters.theme_directory + v[index][0]);
$('#oggvid').attr('src', SiteParameters.theme_directory + v[index][1]);
$('#mp4vid').attr('src', SiteParameters.theme_directory + v[index][2]);
And here is my HTML:
<video autoplay="" loop="" poster="/library/images/vidPoster.jpg" id="bgvid">
<source id="webmvid" src="" type="video/webm">
<source id="oggvid" src="" type="video/ogg">
<source id="mp4vid" src="" type="video/mp4">
</video>
Im pretty much stuck so any help is greatly appreciated.
Well after racking my brain I figured it out. Well somewhat. It only works if I have something already in the src="" part of the html so by setting my HTML to:
<video autoplay="" loop="" poster="/library/images/vidPoster.jpg" id="bgvid">
<source id="webmvid" src="temp" type="video/webm">
<source id="oggvid" src="temp" type="video/ogg">
<source id="mp4vid" src="temp" type="video/mp4">
</video>
Now it works. If I remove the temp from src="" then it does not work.
Related
Goal:
I am trying to implement a control with as little code clutter as possible that will allow the change of quality of a video.
Preferences:
The following is what I am given, and I would rather work around it. I am open to using pre-built plugins or a javascript/jquery hack, but would rather not go for a solution that involves reinventing (me or you) the wheel (require the building of a custom video control scheme), but would take it as a last result.
EDIT:
Sorry. Did not mean to have that correlation, as the urls did not reflect any sort of pattern. I oversimplified it, not assuming people would look at the urls for a pattern. But thank you for that start, as I can probably work with that. Sorry again. I will change the urls to not have any pattern.
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
Thank you in advance for anybody who can give some insight.
Sorry for asking. Turns out I was able to solve it pretty much all by myself. Hate those moments. Here is the solution I came up with, which just involves copying the <source> I need based on the label attribute, deleting it, and prepending it into the <video> element:
HTML
<div class='vidcontainer'>
<select class='qualitypick' autocomplete='off'>
<option selected>fullHD</option>
<option>720p</option>
<option>360p</option>
</select>
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
</div>
JQUERY
$(document).ready(function(){
$('.qualitypick').change(function(){
//Have several videos in file, so have to navigate directly
video = $(this).parent().find("video");
//Need access to DOM element for some functionality
videoDOM = video.get(0);
curtime = videoDOM.currentTime; //Get Current Time of Video
source = video.find("source[label=" + $(this).textContent + "]"); //Copy Source
source.remove(); //Remove the source from select
video.prepend(source); //Prepend source on top of options
video.load(); //Reload Video
videoDOM.currentTime = curtime; //Continue from video's stop
videoDOM.play(); //Resume video
})
})
Although this was not my intention, I hope my answer is of some use. Sorry again for asking before thinking it through.
You don't need many source tags. One is enough, however, you need to change the value of the source attribute, which is src.
var map={'fullHD':'1080p','720p':'720p','360p':'360p'};
function changeQ(quality){
$('source','video#player').attr('src','http://v.com/'+map[quality]);
$('span#pp').html(map[quality]);
console.log($('source','video#player').attr('src'))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Quality
(<span id="pp"></span>)</button>
<ul class="dropdown-menu">
<li>FullHD</li>
<li>720p</li>
<li>360p</li>
</ul>
</div>
<video id="player" width="400" controls>
<source src="http://v.com/1080p" type="video/mp4">
</video>
I'm new to front end (vue). Would love to hear some feedback
I have a video playing on loop. It works fine if the url is good. But if the url is not found, I want to replace it with a placeholder (could be an image). I've tried:
<video autoplay="autoplay" muted loop>
<source :src="url" type="video/mp4" #error="replaceWithPlaceholder">
</video>
replaceWithPlaceholder(e) {
e.target.src = defaultUrl
},
I've done this the exact same way with an image, but Im not sure why it isnt working for a video. What am I doing wrong?
figured it out by using poster
<video autoplay="autoplay" muted loop poster="defaultUrl">
i need help in php website.i am create website like online videos courses.i need help in video module.if playing any video and close it after some time and again play this video then need to play it where it can be stop or closed.
This video are getting from database not embedded video.for showing video i am using afterglow video player.
<video class="afterglow" id="myvideo" height="385px" width="770px">
<source type="video/mp4" src="adminpanel/video/<?php echo $results->c_video; ?>" />
</video>
Is there any script to solve this problem.
As suggested in the comments you have to save the position of your video somewhere. The most simple approach would be to use the localStorage. You can read more about localStorage in the official documentation: https://developer.mozilla.org/de/docs/Web/API/Storage
While the video is played the timestamp gets refreshed each second and the localStorage item is updated.
Then if you reload the page (remember: item still exists in the storage after a refresh) you check for its existence and set the video to the timestamp.
This should point you in the right direction.
let video = document.getElementById("example");
if (localStorage.hasOwnProperty("time")) { //if time was set before adjust the video to it
video.currentTime = localStorage.getItem("time");
}
let timer = setInterval(getTimestamp,1000);
function getTimestamp(){
localStorage.setItem("time", video.currentTime);
console.log(localStorage.getItem("time"));
}
<video id="example" width="320" height="240" controls>
<source src="yoursourcefile" type="video/mp4">
</video>
I have a video in which I want to disable fullscreen playing with html5 video tag in iPhone,
I tried different solution as suggested in StackOverflow but none seemed to solve the problem.
Here is my solution by adding playisinline=1
<video id="orange-video-1" class="videotag active" preload="auto" playsinline=1 webkit-playsinline=1 src="emptyvideo/emptyvideo.mp4" muted>
</video>
what do I need to change to get what I want?
Actually you don't need to set it to equal one. playsinline should work.
Try this instead:
<video id="orange-video-1" class="videotag active" preload="auto" webkit-playsinline playsinline src="emptyvideo/emptyvideo.mp4" muted>
</video>
Doing it from a jQuery view would also work:
// Sets the attribute, empty second parameter needed
// otherwise it would be a getter func
$('video').attr('webkit-playsinline', '');
$('video').attr('playsinline', '');
// Set the webview on iOS
webview.allowsInlineMediaPlayback = true;
If that doesn't work:
Reading Apple's documentation it appears you would use the following code since playisinline=1 works if the website is stored on the home page. Try this in your config file:
<preference name="AllowInlineMediaPlayback" value="true" />
Initially the poster is visible before video call start after video call ends i am able to see a black background in place of poster in video container.
below is the html tag that i have used for this purpose.
<div id="videoSmall">
<video id="videoInput" autoplay width="240px" height="180px" poster="img/webrtc.png"></video>
</div>
i have tried to reset "videoInput" div with this code
var tag = $("#videoInput").clone();
$("#videoInput").replaceWith(tag);
This code works and brings poster image back but the issue with this is when i am performing video call again without refreshing the page .. the poster is not vanishing in order to show video .
You can do this by adding ended eventListener to the video element, and call the video load() again.
Here is a working example: CodePEN
HTML:
<video id="video" width="320" height="240" controls poster="http://www.w3schools.com/images/w3html5.gif">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
JavaScript / jQuery:
var video= $('#video')[0];
var videoNew= $('#video');
videoNew.on('ended',function(){
video.load();
});