I'm trying to use the KDP javascript API to implement a .mp4 file in HTML5 using the Klatura player. This is my code so far:
<div id="video" class="hide" >
<video name="player_123" id="player_123" width="330" type="video/mp4" height="480">
<source src="assets/91zVbVyKPSS.mp4" >
</video>
</div>
How could I use the Javascript API with what I have? I have no idea how to configure it. It seems that it's trivial with the object tag but not the video tag.
Switched to videojs.
Life is a little bit easier:
The point was, whatever you are about to do you should always use the HTML5 video tag. You should help the JS library of the video platform to identify the tag and everything should be automatic from there.
Related
I have a little problem when I use an asset.
error capture
In my database I have the link of videos which are stocked in my server and for example one of them is : Commande/test/a/2362022a.mp4, the right path of the file is myProject/public/Commande/test/a/2362022a.mp4
So I try to do this :
<video controls>
<source src="{{ asset(commande.lienVideo)}}" type="video/webm">
</video>
But I have this error :
An exception has been thrown during the rendering of a template ("Asset manifest file "/var/www/html/app_brobro/public/build/manifest.json" does not exist. Did you forget to build the assets with npm or yarn?").
I also try this, but I have got the same error :
<video controls>
<source src="{{ asset('/' ~ commande.lienVideo)}}" type="video/webm">
</video>
I hope someone will have a solution to this ^^
Thanks by advance and have a nice day !
According to our exchanges in comments here is your solution:
As the official Symfony documentation specifies here, you have to build your Webpack with yarn dev by default or npm run build if you prefer npm to manage your front dependencies.
So just run one of them and that's it !
I am learning Tensorflow using the Tensorflow.js library for machine learning when I run my simple program getting the following warning
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#0.12.5"> </script>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
tf.tensor([1,2,3,4,5]).print();
tf.tensor([[1,2,3],[4,5,6]]).print();
</script>
</head>
<body>
</body>
</html>
This browser does not support WebGL. at
createWebGLRenderingContextFromCanvas
what's the exact root cause for this?
I solve this problem in Chrome by enabling "Use hardware acceleration when available" in Chrome. So I go to "Setting", click on "Advanced", and then enable "Use hardware acceleration when available".
I've got a local video file (an .avi, but could be converted) that I would like to show a client (ie it is private and can't be published to the web), but I can't figure out how to play it in IPython notebook.
After a little Googling it seems that maybe the HTML5 video tag is the way to go, but I don't know any html and can't get it to play.
Any thoughts on how I can embed this?
(updated 2019, removed unnecessarily costly method)
Just do:
from IPython.display import Video
Video("test.mp4")
If you get an error No video with supported format or MIME type found, just pass embed=True to the function: Video("test.mp4", embed=True).
Or if you want to use the HTML element:
from IPython.display import HTML
HTML("""
<video alt="test" controls>
<source src="test.mp4" type="video/mp4">
</video>
""")
Play it as an HTML5 video :]
from IPython.display import HTML
HTML("""
<video width="320" height="240" controls>
<source src="path/to/your.mp4" type="video/mp4">
</video>
""")
UPDATE
Additionally, use a magic cell:
%%HTML
<video width="320" height="240" controls>
<source src="path/to/your.mp4" type="video/mp4">
</video>
and the same applies for audio too
%%HTML
<audio controls>
<source src="AUDIO-FILE.mp3">
</audio>
Use a markdown cell:
<video controls src="path/to/video.mp4" />
Citation: Jupyter Notebook » Docs » Examples » Markdown Cells
An easier way:
from IPython.display import Video
Video("OUT.mp4")
#Atcold's comment saved me today ;) so I'm posting this as an answer with more detail.
I had a cell with video capture command like this:
!sudo ffmpeg -t 5 -s 320x240 -i /dev/video0 /home/jovyan/capture.mp4
captured file was saved in a location out of git repository to manage disk usage.
for jupyter notebook, a file needs to be on the same directory as the .ipynb file.
# run this before calling Video()
! ln -sf "/home/jovyan/capture.mp4" ./capture.mp4
from IPython.display import Video
Video("capture.mp4")
voila!
Thank you everyone for the wonderful answers and comments.
Look at this link, you'll find more https://gist.github.com/christopherlovell/e3e70880c0b0ad666e7b5fe311320a62
from IPython.display import HTML
from IPython.display import HTML
HTML('<iframe width="560" height="315" src="https://www.youtube.com/embed/S_f2qV2_U00?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>')
You could also try this:
from ipywidgets import Video
Video.from_file("./play_video_test.mp4", width=320, height=320)
It appears a common issue is not including the video in the same directory as the calling notebook. Given an MP4 'generating_bootstrap_replicates.mp4' in the same directory as the notebook, the following function will load a video in an HTML player at full cell width while also asserting the video is in fact available locally. Works in Jupyter Notebook and Jupyter Lab. Tested with Python v3.8 kernel.
#!/usr/bin/env python3
def video_player(video, mtype="video/mp4"):
""" Displays mp4 video in Jupyter cell. Jupyter requires video
in the same directory as the calling notebook. An assertion error
will be thrown if this is not true.
Parameters
----------
video (str): the filename of the video. Example: "generating_bootstrap_replicates.mp4"
mtype (str): the mime type of the video. Example: "video/mp4"
"""
from pathlib import Path
from IPython.display import HTML, display
cwd = Path.cwd()
assert video in [file.name for file in list(cwd.glob('*'))], \
f'{video} must be in local directory: {cwd}'
call = """
<video width=100% controls>
<source src="{}" type="{}">
</video>""".format(video, mtype)
display(HTML(call))
video_player('generating_bootstrap_replicates.mp4')
from IPython.display import IFrame
# play video of video in jupyter notebook
IFrame(src='https://www.youtube.com/embed/mcVEbWh5uWU? rel=0&controls=0&showinfo=0', width=500, height=300)
Up to my knowledge, Ubuntu systems have some issues supporting
direct rendering of video files such as .mp4.
You will need to do some encoding/decoding with jupyter notebook.
Example:
mp4 = open(path,'rb').read()
data_url = "data:video/mp4;base64," + b64encode(mp4).decode()
This snippet can solve this issue.
from IPython.display import HTML
from base64 import b64encode
def display_video(path):
mp4 = open(path,'rb').read()
data_url = "data:video/mp4;base64," + b64encode(mp4).decode()
display(
HTML(
"""
<video width=400 controls>
<source src="%s" type="video/mp4">
</video>
""" % data_url
)
)
the snipet was obtained from (https://github.com/facebookresearch/AugLy/blob/main/examples/AugLy_video.ipynb) but it is used quite often in other repositories
I have a html5 video video that is not loading in chrome, it just shows the loading spinner from video.js.
I get the following error in chrome console too:
Uncaught TypeError: Cannot call method 'init' of undefined machinas.com/:830
["Video Error", Object]
0: "Video Error"
1: Object
length: 2
__proto__: Array[0]
.htaccess
AddType video/mp4 .mp4 .m4v
AddType video/webm .webm
AddType video/ogg .ogv .ogg
html
<video id="video-1" class="video-js vjs-default-skin"
width="100%" height="100%"
poster="videos/timelapse.jpg"
data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'>
<source src="videos/timelapse.mp4" type='video/mp4' />
<source src="videos/timelapse.webm" type='video/webm' />
<source src="videos/timelapse.ogv" type='video/ogg' />
Your browser doesn't support HTML5 video.
Download the video instead.
</video>
Anyone know what could be the issue?
I had same Problem after wrong Conversion.
Try to expand the problem in chrome console to check which video file produces the error. I think its the .mp4 version.
I used "miro video Converter" to convert from mp4 to mp4 and it works well but you get a little quality loss...
after that its possible that you have same problem like me... chrome doesnt play .webm files... no idea why :(
sry about bad english ^^
The good thing (or bad) is the fact that this is not the VideoJS issue. I had the same problem. Looking on the Internet we can find some informations (for example: https://github.com/flowplayer/flowplayer/issues/423) and it considered to be a Chrome bug. Issues was reported in JWPlayer and VideoJS forum as well.
AFAIK the only way to bypass this is loading webm file:
<source src="test.webm" type="video/webm" />
I tried to put webm source before mp4. Chrome recognized webm as "good" source and play it well. Sadly FF and IE won't play a thing. So we need to chose one format after browser-check (what is wrong but I in this point I don't see another way; this is not JS feature related problem...).
Why browser detection is generally bad idea? You can read more about this in Test-Driven Javascript Development book or here: http://jibbering.com/faq/notes/detect-browser/
As quick fix you can use something like this:
/* load webm for chrome */
if (window.chrome) {
videojs('videoTagId').src({ type: "video/webm", src: 'path/to/file.webm' });
}
So I'm trying to add subtitles to a html5 video and found WebVTT. I've done some research on it and have even copied some example code to see if that'll work and yet I have no luck.
The subtitles just simply don't show up on the video.
Here's the HTML.
<video id="video" class="video" controls>
<source src="solar.mp4" type="video/mp4">
<source src="client2.ogv" type="video/ogv">
<source src="solar.webm" type="video/webm">
<source src="solar.flv" type="video/flv">
<track label="English Captions" kind="captions" srclang="en" src="english-subtitles.vtt">
</video>
and the test VTT file.
WEBVTT
1
00:00:13,00 --> 00:00:16,000
Man did you see that awesome thing like last week -
2
00:00:16,100 --> 00:00:20,100
- and i said wow a lot of people are starting to talk about this.
It doesn't work locally, you need to run it on a server.
You use the incorrect time-stamp format. There should a . (dot), after the second value.
It should be like this: 00:00:00.000 --> 00:00:10.000
I had the same problem you were having.
The problem is that Chrome has a security feature that does not allow files to run local files in Chrome.
The solution is to run Chrome with the allow local access flag. The link gives instructions for each OS.
Browsers do not support that feature locally
Except Mozilla Firefox 66.0.2