I wish to stream live video in my https website from this http site.
Added reference of hls.min.js into my template. Copy-pasted their code:
<video id="video" width="320" height="240" controls autoplay
class="videoCentered"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('/hls/metsis.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>
into my template, but the player doesn't start to stream.
browser console says:
Uncaught ReferenceError: Hls is not defined
Where exactly is reference error? Here?
hls.loadSource('/hls/metsis.m3u8');
correct working code:
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<video id="video" width="100%" height="380" controls autoplay
class="videoCentered"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://tv.eenet.ee/hls/metsis.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>
but browser blocks it, because the content must be served over https if my page is loaded over https.
You are getting this error as you are trying to access Hls without importing it. Please import it using the following way
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
A more detailed example can be seen at Getting Started section of HLS documentation
Also, Add the correct reference
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
Related
I have a problem that IE11 isn't playing my html5 video tag video. I've tried other browsers like Chrome/Firefox and there it works perfectly fine. IE11 doesn't even give me an error in the console why it isn't playing the video and shows me white background. I tried different formats like .m4v and mp4. The video is in h264 encoding and web optimized(I'm using software named "Handbrake" to encode the video"), the resolution is 1920x1088. I also tried to put "" in my website head.
My HTML code
<video autoplay loop muted id="player">
</video>
<img id="backfill-image" src="<?php bloginfo('template_url'); ?>/img/backgroundimage.jpg">
</div>
My JavaScript
let myPlayer;
let backfill;
window.addEventListener('DOMContentLoaded', (event) => {
myPlayer = document.getElementById("player");
backfill = document.getElementById("backfill-image");
myPlayer.onerror = function() {
console.error(myPlayer.error);
showPlaceholderImage();
};
// Example invalid source to throw an error
myPlayer.src = ""+templateUrl+"/img/myvideo.m4v";
// Example valid source that doesn't throw an error
// myPlayer.src = "https://www.w3schools.com/tags/movie.mp4";
function showPlaceholderImage() {
myPlayer.style.display = "none";
backfill.style.display = "block";
}
});
I tried to make a test with the MP4 format H264 encoder video.
It looks like it is working fine on the IE 11 browser.
Here is a test code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>
<body>
<video width="400" autoplay>
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
</body>
</html>
Here, you can see that I have verified that the video has an H264 encoder using a VLC player.
Output in the IE 11 browser:
Video downloaded from this site
I have a WordPress site with a page containing a video; I'd like this video to play automatically when the page is visited, and once the video has finished playing, I'd like a redirect to happen to a different page on my site.
I've followed the instruction from this post:
Redirect html5 video after play
But this doesn't seem to work for me and I can't figure out what I should do differently.
Here's the code currently on my page:
<script src="text/javascript">
function playVideo(){
var video = document.getElementById('addiction-video');
video.play();
video.addEventListener('ended',function(){
location.href = 'http://mywordpresssite.com/addiction-a-call-for-connection-acim/';
});
}
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite.com/wp-content/uploads/2015/12/Addictions.mp4" type="video/mp4" />
</video>
Can anyone tell why it's not redirecting after the video has finished playing?
I have the above code directly in my WordPress page; I've tried placing the script below the html, and I've tried adding the script into my theme settings, but neither made it work.
Thank you!
Firstly change <script src="text/javascript"> to <script type="text/javascript"> since you are not importing an external script file. Read a bit about <script> tag.
Secondly you don't need the playVideo() function. Rewrite your code accordingly:
<script type="text/javascript">
var video = document.getElementById('addiction-video');
video.addEventListener('ended',function(){
location.href = 'http://mywordpresssite.com/addiction-a-call-for-connection-acim/';
});
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite.com/wp-content/uploads/2015/12/Addictions.mp4" type="video/mp4" />
</video>
You don't need video.play();, since you have autoplay="autoplay" attribute in <video> tag. Read about it here and try it yourself here.
Thirdly keep your browser console open while writing a js code.
Good Luck!
I am trying to use WebRTC and HTML 5 to achieve this. I am very new to WebRTC. So in order to achieve the task i tried using getUserMedia as an example to show the video my browser is playing.
As an experiment, right now, playing video and live stream of that video is on same html page.
My HTML code is the following:
<div id="video_player_box">
<video id="my_video" width="1100" height="600" >
<source src="path/to/my/video/">
</video>
</div>
<div id="container">
<h1>simpl.info getUserMedia</h1>
<video autoplay></video>
<p>The <code>MediaStream</code> object <code>stream</code> passed to the <code>getUserMedia()</code> callback in this demo is in global scope, so you can inspect it from the console.</p>
</div>
I am sourcing js like this:
'use strict';
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var constraints = {
audio: false,
video: true
};
var video = document.getElementById("my_video");
function successCallback(stream) {
window.stream = stream; // stream available to console
video.src = document.getElementById("my_video");
}
function errorCallback(error) {
console.log('navigator.getUserMedia error: ', error);
}
navigator.getUserMedia(constraints, successCallback, errorCallback);
Can anyone help me with this and tell me if I am going in the right direction? or should I use some other method. Because this has not worked till now. I am still reading about WebRTC.
Note: I don't want to use their(webrtc) screen sharing method for this functionality
You should replace video.src = document.getElementById("my_video"); with video.src = window.URL.createObjectURL(stream);.
So I have created a simple video playlist which works great with videos that I am hosting but I get the above error when loading a youtube video src. Onclick I am grabbing the url from a data attr and using the video.js src function to load the new video.
video settings:
<video id="fatigue-1"
class="video-js vjs-default-skin"
controls
preload="auto"
width="100%"
height="100%"
data-setup='{"techOrder":["youtube", "html5"], "src": "https://www.youtube.com/watch?v=SS4F1U5FuNM"}' >
</video>
update src function:
updateSrc: function(e) {
var videoURL = $(e.currentTarget).attr("data-url"),
videoType = $(e.currentTarget).attr("data-type"),
videoID = this.$el.find(".video-js").attr("id"),
videoPlayer = videojs(videoID);
videoPlayer.src({type: videoType, src: videoURL});
}
I'm not sure that the youtube plugin works with the src function as when my method runs it updates the src outside the data-setup attr and in the docs it states that the url should be defined inside. Also the video id changes to show the html5 api is being used rather than the youtube one. See below:
<video id="fatigue-1_html5_api"
class="vjs-tech"
preload="auto"
data-setup="{"techOrder":["youtube", "html5";], "src": "https://www.youtube.com/watch?v=SS4F1U5FuNM";}"
src="//www.youtube-nocookie.com/embed/yP41vpFOKVA">
</video>
Wondering if anyone has a working example of dynamically loading youtube videos with videojs or can see any glaring mistake I am making?
In html:-
<video
id="my-player"
class="video-js vjs-default-skin"
controls
preload="auto"
width="1260"
>
</video>
do not provide any in-line data setup or src
In js;-
const player= videojs('my-player',{
preload:'auto',
controls:true,
autoplay:true,
techOrder:['html5','youtube']
})
player.src({type:'video/youtube',src:videoUrl})
player.load();
player.play();
The below code is how I put audio in my webpage. It will play the sound when I received protocol from my slave device.
<script>
function RxProtocol()
{
var a = document.getElementById("audio1");
a.play();
}
</script>
<body>
<audio id="audio1">
<source src="audio.wav" type="audio/wav">
<source src="audio.mp3" type="audio/mpeg">
audio tag not supported.
</audio>
</body>
It is suppose to play the sound each time it received a protocol. But when I use google Chrome, it just play once only (after refresh/reloading the page) when it received the first protocol. After that it is silence when receive protocols.
Other browser like IE9 or firefox do not have this problem. Do you guys know why?
Try adding addEventListener :
<script>
function RxProtocol()
{
var a = document.getElementById("audio1");
a.play();
}
document.addEventListener("load", RxProtocol, false);
</script>
Regards, Daniel
We need to load first for Google Chrome:
function RxProtocol()
{
var a = document.getElementById("audio1");
if (window.chrome) {
a.load();
}
a.play();
}