I suppose the Safari browser is supporting the HLS. I quickly tried it but streaming was not started - Is anything wrong with mycode?
<html>
<head>
<title>HTTP Live Streaming</title>
</head>
<body>
<video controls src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8">
</video>
</body>
</html>
I am using the Windows version of the Safari browser 5.0.3.
Thanks
STeN
HTTP Live Streaming is supported on Safari on Mac through Quicktime X which is available on Snow Leopard and Lion. Quicktime 7 is also used on Mac for media functions that are not yet available in Quicktime X. On Windows, Quicktime 7 is available but not Quicktime X. So Safari on Windows does not support HTTP Live Streaming.
I was reading the apples documentation and I found that you can define alternate sources
https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW1l
something like this:
<!DOCTYPE html>
<html>
<head>
<title>Multi-Scheme Video Player</title>
</head>
<body>
<video controls autoplay >
<source src="http://HttpLiveStream.m3u8">
<source src="rtsp://LegacyStream.3gp">
<source src="http://ProgressiveDownload.m4v">
</video>
</body>
</html>
You could try it with just one source.
But I also found some information suggesting to use httlive:// instead of http://
Related
I would like to play a sound on a load of an HTML page. First I tried this solution:
<audio src="static/audio/lang/pchwcafckzdmfcvuneezavatquflye_en.mp4" id="my_audio" loop="loop" type="audio/mpeg"></audio>
<script type="text/javascript">
window.onload=function(){
document.getElementById("my_audio").play();
}
</script>
It did not work. Then I have tried this one:
<audio src="static/audio/lang/pchwcafckzdmfcvuneezavatquflye_en.mp4" id="my_audio" loop="loop" type="audio/mpeg"></audio>
<script type="text/javascript">
var sample = document.getElementById("my_audio");
sample.play();
</script>
This does not work as well. In have tried to load the page in Chrome as well as Firefox. In both browsers if does not work.
What am I doing wrong?
Autoplay with sound is disabled and policies updated in Chrome and Firefox
Check these articles:
Autoplay policy in Chrome
Audio Autoplay in Chrome
Chrome autoplay policy changes
Autoplay guide for media and Web Audio APIs
It has taken me several hours to play rtmp video using videojs. Can anyone give an example that can just run?
I am using chrome. Flash is enabled.
Below is my code. Video url is valid. Can anyone make it run?
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/video.js#7.3.0/dist/video-js.min.css">
<script src="https://cdn.jsdelivr.net/npm/video.js#7.3.0/dist/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-flash#2.1.2/dist/videojs-flash.min.js"></script>
</head>
<body>
<video width="600"
height="400"
id="example"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
autoplay
preload="auto"
data-setup='{"techorder" : ["flash","html5"] }'>
<source src="rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd" type="rtmp/mp4">
</video>
</body>
<script>
var player = videojs('example');
player.play();
</script>
</html>
Presumably, you found the previous discussion thread from a year ago:
Playing RTMP stream with VideoJS player
which indicates that others have had difficulty and did NOT succeed.
Now that HTML5 is firmly established, Flash video is rapidly disappearing, as
mentioned four years ago:
https://www.theverge.com/2015/1/27/7926001/youtube-drops-flash-for-html5-video-default
It is very straightforward to convert flash-video into more modern formats...one
such article for using an excellent free open-source tool for conversion is here:
https://addpipe.com/blog/flv-to-mp4/
So, rather than try to solve your technical problem, I would recommend, if at all
possible, to bring your videos up to present-day technology.
I have TV video stream (which is apparently mpeg-ts stream), if I use html5 video tags it all works find on win/mac machines using Chrome.
<video id="player1" width="640" height="360" preload="none" controls playsinline webkit-playsinline>
<source src=""http://192.168.1.72:9981/stream/channelid/2013555866?ticket=388550710ddf21ad5c6ffd61fcd3d0dc24cf46d2&profile=matroska type="video/webm">
</video>
But that doesn't work on Android tablet nor on iOS.
I have tried installing multiple different JS player, such as mediaelement, plyr, video.js, mpegts... And I have installed like all three browsers on Android tablet - Chrome, Opera and Mozilla for testings. Every single JS player works fine if I watch the video from my laptop (Chrome), but none of them works when I access from Android device.
The furthest I can get is using Opera+plyr(or video.js) to get an audio playing fine, but with a black screen, no video.
add this as your video starting tag and it will autoplay for android and safari mobile :
<video autoplay="" muted="" loop="" playsinline="" id="vid" preload="auto" width="100%" height="100%">
you also need mp4, ogv and webm formats for crossbrowser
This might work for you. It works fine for me.
<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline>
I would try enabling controls as on iOS if your video is supposed to start automatically it will not allow it.
Another thing is to try adding an HTTP Range Header, it helps to split video into byte ranges which is something to take into mind with mobile. This is more for iOS in general but take a look at this link: http://fdiv.net/2013/05/17/getting-html5-video-work-ios-mobile-safari
Also as mentioned by other check the format of your video you should ALWAYS have multiple types available.
Video tag doesn't work on mobile. What I've seen people do lately is use gif's as the poster of the video on mobile. I would also look into tools like Wistia for extra video support. Gifs work on mobile, but as the video assets, they take a while to load since they're usually big.
I don't recommend self-hosting as you won't have a ton of support such as slowly loading the video or dynamically switch from 320p version to HD version as it loads, etc.
For example https://wistia.com/learn/marketing/boost-engagement-with-gifs
If you're using a separate host for your files, its server should have a valid SSL certification like my case. My android video player did not work until I added a certification.
I'm currently trying to incorporate a full screen video BG in my home slider (via Revolution SLider, a WP plugin which supports HTML5 video).
The video loads fine in FF and Chrome, but I get nothing but the loading .gif and a black screen in Safari - I've got both .mp4 and .ogv available and linked, so I know the correct format is there.
Any ideas/solutions would be massively appreciated!
Use the specific video format safari uses.
<!doctype html>
<html>
<head>
<title>Multi-Scheme Video Player</title>
</head>
<body>
<video controls autoplay >
<source src="http://HttpLiveStream.m3u8">
<source src="rtsp://LegacyStream.3gp">
<source src="http://ProgressiveDownload.m4v">
</video>
</body>
</html>
Here you will find things properly about video support by particular browser CLICK HERE
Recently, I've found that Google Music's new iOS specific web app (http://music.google.com) has the ability to "hijack" the native iOS iPod's music controls (double tap your home screen and use those pause, play, next, prev buttons while playing Google Music).
I had no idea that this was possible through a web app and have had trouble finding any examples or clues on how to achieve this through javascript. Does anyone have an idea?
iPhone is a WebKit browser therefore it supports the <audio> tag. All you have to do is throw in an <audio> tag with it's source linked to a playable audio format on WebKit (.aac for example) and you will have control over the audio file. You'll also notice an indicator in the top right of the screen to the right of your iPhone clock/time.
Here's all the info:
https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html
Here's an example piece of code:
<!DOCTYPE html>
<html>
<head>
<title>Multi-Source Audio Player</title>
</head>
<body>
<audio controls autoplay >
<source src="http://Example.com/path/MyAudio.m4a">
<source src="http://Example.com/path/MyAudio.oga">
<source src="http://Example.com/path/MyAudio.wav">
</audio>
</body>
</html>
Here's iOS specific info:
https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1