while using laravel 5 and google chrome to return the view that include a video tag
I can't get to allow video seeking I found that it could relate to not
accepting range in laravel but being quite noob I don't know what to do??
<!-- the view -->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<video id="xx" class="video-js vjs-big-play-centered"
data-setup={} height="300px" width="300px"
preload="none" controls>
<source src="{{asset('videos/property.mp4#t=120')}}"
type="video/mp4" media="" >
</video>
</div>
</body>
</html>
It looks like you're using VideoJS as a video player. This is where you'll be able to handle scrubbing and jumping to a timestamp within the video. I'd check their documentation for the best way to handle that, and look at your Google Chrome dev tools console to see if there are any JavaScript errors.
There isn't currently a non-JavaScript way to start a video at a specified point, so I don't believe Laravel is the culprit here.
Related
My requirement is to play a flash video (flash plugin is installed in the browser).
I have written the code by referring to how to play flash(.flv) video using video.js in chrome
But it's not working for me, the problem I observed is src tag is not getting replaced with obj (its happening in their case).
Can any one help me to understand what I am missing
My code:
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="400px" height="268" data-setup='{"techOrder": ["flash", "html5"]}'>
<source src="http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv" type='video/x-flv'>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
I tried the code from your reffered link and it worked for me in Chrome browser (Windows).
Here is a quick demo example. The source code for that demo page is below. Compare with your own page code to see what could be wrong.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> Example - Video.js </title>
<link href="http://vjs.zencdn.net/4.7/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.7/video.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
<source src="http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv" type='video/x-flv'>
</video>
</body>
</html>
I have a m3u8 stream provided by Plex Media Server, and when i look on chrome or FF it works great, but when going to the page on IE9 it says:
The video could not be loaded, either because the server or network failed or because the format is not supported.
this is the code I used:
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{}'>
<source src="http://ip:port/video/:/transcode/universal/start?path=http%3A%2F%2Fip%3Aport%2Flibrary%2Fmetadata%2F1&fastSeek=1&X-Plex-Platform=Internet+Explorer&offset=0" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</body>
</html>
I tried adding the following plugin: https://github.com/videojs/videojs-contrib-hls
but no luck there.
Anybody got any clue what I might be doing wrong?
From the readme, videojs-contrib-hls does not support Internet Explorer < 10 unfortunately. I don't have the exact details, but it's because the tech requires more advanced and better performing javascript than is available on IE9.
btw, in your code the mime type is 'video/mp4'.
I've been working on a musician's site with html5 audio playback. Everything works fine in Firefox and Chrome, but IE has been giving me issues, and I narrowed it down to the way I'm loading the media.
Part of my strategy to obfuscate the media source is to have an audio tag with no source, then add the source via javascript.
If I manually write the html, IE10 honors the preload="none" attribute, but if I don't include the sources and add them to the DOM via javascript, the preload attribute is ignored.
Example 1 works as intended:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 audio test</title>
</head>
<body>
<p>
This is an audio tag with two source tag children of different types. Preload is set to none.
</p>
<audio id="audiotest" preload="none" controls>
<source src="test.ogg" type="audio/ogg">
<source src="test.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Example 2 loads starts to download the media despite the preload attribute:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 audio test</title>
</head>
<body>
<p>
This is just an audio tag with preload none with javascript adding the sources.
</p>
<audio id="audiotest" preload="none" controls>
</audio>
<script>
var oggSource = document.createElement('source');
oggSource.type='audio/ogg';
oggSource.src='test.ogg';
var mp3Source = document.createElement('source');
mp3Source.type='audio/mpeg';
mp3Source.src='test.mp3';
document.getElementById("audiotest").appendChild(oggSource);
document.getElementById("audiotest").appendChild(mp3Source);
</script>
</body>
</html>
Here are the working examples:
http://www.joshblackburn.com/test1.php
http://www.joshblackburn.com/test2.php
I was trying to figure out why none of my controls were working in IE. I figured out that it was downloading every single track and locking things up. Using the dev panel in IE10, the network trace confirms the issue.
Is this an IE bug? Do I need to figure out different ways of obfuscating my sources?
The 'real' page is www.joshblackburn.com/new.php?page=albums if anyone is interested.
I am working on a gallery page with quite a few external HTML pages embedded using iframe, however, some of these external pages have audio embedded into them which I would like to mute.
Here is a sample code for the HTML files
gallery.html
<div id="pages">
<iframe id="embed" src="https://xyz.com/page1.html"></iframe>
<iframe id="embed" src="https://sdf.com/page2.html"></iframe>
</div>
page1.html
<html>
<head>
<!-- head stuff-->
</head>
<body>
<audio autoplay>
<source src="http://audio.url/somefile.ogg" type="audio/ogg">
<source src="http://audio.url/somefile.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<!--some more body content>
<body>
</html>
Also, since I'm dealing with multiple external pages, the audio tags mostly might not have ids attached to them. This makes document.getElementById() a non-reliable option. I've experimented with document.getElementsByTagName("input") but couldn't quite get the audio muted. Can anyone please help me with this?
Since these pages are being served up from different domains you will not be able to access the HTML within the iframe due to same origin policy.
I've been working on a video uploading script, you can upload a video (I haven't tested all video formats yet) and it'll convert the video to .mp4, .ogg, and .webm files.
I'm using flowplayer to embed the video, and you can see a test video working, but the loading bar doesn't go away so you can't get to the controls. Here's my embed code:
<link rel="stylesheet" type="text/css" href="<?=$url;?>javascript/flowplayer/skin/minimalist.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="<?=$url;?>javascript/flowplayer/flowplayer.min.js"></script>
(I don't think that part is the problem)
and
<div class="flowplayer" data-swf="<?=$url;?>javscript/flowplayer/flowplayer.swf" data-ratio="0.417">
<video autoplay>
<source type="video/webm" src="<?=$video->file('webm');?>" />
<source type="video/mp4" src="<?=$video->file('mp4');?>" />
<source type="video/ogg" src="<?=$video->file('ogg');?>" />
</video>
</div>
I've tried removing the data-swf and the data-ratio attributes, I've tried moving around the link and script tags, but no cigar.
I found the problem, I'll put it here in case anyone gets the same problem.
It might have to do with using the newest jQuery version from Google's hosted library, but flowplayer.js had this:
on("mouseout.tip", function()
When they should have used
bind("mouseout.tip", function()