How to play mp4 music file in my local folder on xaringan? - r-markdown

I want to play mp.4 file on my xaringan slide, and I add the following but it won't play. Am I missing something here? Thank you.
<video width="500" height="400" controls>
<source src="music.mp4" type="video/mp4">
</video>

Related

Flask Jinja2 fetch row <audio src="LINK" /> not working

I add file as <audio src="LINK" controls /> to mysql.
When I fetch mysql row it not show audio player but show text <audio src="LINK" controls /> instead of embeded audio player

Using Python loops to generate text based on user input

The following script asks a user for information, stores the information as variables, and then creates a file that inserts the variables into various places within the text. The created file is an html web page that can then be run on my web server. The example shows 4 sets of variables and works well. However I would like to ask a user for the total number of required sets and then perform a loop that keeps asking for the same info (i.e. video number, description, folder name) until the total number is reached. For each iteration, I would like to generate select sections of the html text. I'm a Python noob so any help/feedback is greatly appreciated. Thanks in advance!
# The next 12 variables prompt the use for the label, description and folder names for 4 videos
Video1_Num = raw_input('Enter the number label for Video 1: ')
Video1_Desc = raw_input('Enter the description of Video 1: ')
Video1_Fold = raw_input('Enter the name of the folder where video 1 is stored: ')
Video2_Num = raw_input('Enter the number label for Video 2: ')
Video2_Desc = raw_input('Enter the description of Video 2: ')
Video2_Fold = raw_input('Enter the name of the folder where video 2 is stored: ')
Video3_Num = raw_input('Enter the number label for Video 3: ')
Video3_Desc = raw_input('Enter the description of Video 3: ')
Video3_Fold = raw_input('Enter the name of the folder where video 3 is stored: ')
Video4_Num = raw_input('Enter the number label for Video 4: ')
Video4_Desc = raw_input('Enter the description of Video 4: ')
Video4_Fold = raw_input('Enter the name of the folder where video 4 is stored: ')
# The next line opens up a file with an html extension
f = open('index123.html','w')
# The following will be written into the file
html_page = """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.4.js" type="text/javascript" charset="utf-8">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("span.prj-slide1").click(function(){
$("#select_opt1").slideToggle('fast');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("span.prj-slide2").click(function(){
$("#select_opt2").slideToggle('fast');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("span.prj-slide3").click(function(){
$("#select_opt3").slideToggle('fast');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("span.prj-slide4").click(function(){
$("#select_opt4").slideToggle('fast');
});
});
</script>
<title>Demo</title>
</head>
<body>
<div id="header"><img src="logo.png" width="390" height="60" border="0" /></div>
<div id="select_head">Select the video you wish to review:</div>
<div id="select_opt">
<p><span class="prj-slide1"><b>Video %s:</b>  %s</span></p>
<div id="select_opt1" style="display: none;">
<video width="320" height="240" controls>
<source src="./%s/%s_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br></br>
<p><span class="prj-slide2"><b>Video %s:</b>  %s</span></p>
<div id="select_opt2" style="display: none;">
<video width="320" height="240" controls>
<source src="./%s/%s_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br></br>
<p><span class="prj-slide3"><b>Video %s:</b>  %s</span></p>
<div id="select_opt3" style="display: none;">
<video width="320" height="240" controls>
<source src="./%s/%s_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br></br>
<p><span class="prj-slide4"><b>Video %s:</b>  %s</span></p>
<div id="select_opt4" style="display: none;">
<video width="320" height="240" controls>
<source src="./%s/%s_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br></br>
</div>
</body>
</html>""" %(Video1_Num, Video1_Desc, Video1_Fold, Video1_Fold, Video2_Num, Video2_Desc, Video2_Fold, Video2_Fold, Video3_Num, Video3_Desc, Video3_Fold, Video3_Fold, Video4_Num, Video4_Desc, Video4_Fold, Video4_Fold)
#'html_page gets written into the file and is closed. I then manually copy the newly created file to my web server.
f.write(html_page)
f.close()
You can use list of dict.
video_list=[]
Suppose u get a three values, num_val, desc_str and fold_num as input
Then a make a dict of video as video={'num': num_val,'desc':'desc_str','fold_num':fold_num}
Now, you can keep pushing it in video_list as given below and can access them as mentioned below. Imp Note: while inputting data, there may be need of casting as per the datatypes like int or string.
video_list =[]
Video_count =4
for n in range(Video_count):
num_val= input('enter number...')
desc_str= input('enter desc...')
fold_num= input('enter fold...')
video={'num': num_val,'desc':'desc_str','fold_num':fold_num}
video_list.append(video)
you can access the element by index and element as below:
video_list[index]['num_val']
where index is any number between 0 and len(video_list)-1 (both inclusive).
num_val is the element of dict and it could be any one of num_val, desc_str and fold_num.

video js forwording is not working with django in chrome

Video js is not working in chrome (latest version) with django 1.8. It is working well in firefox and IE. In chrome, video is playing well but when i click on the scrum to forward and backward video, video restarts again. I also tried with CDN but It result same:
<video id="ml_video" class="video-js vjs-default-skin" controls preload="auto" data-setup="{}" width="100%" height="400px" src="{{ mn_video.url }}">
<source src="{{ mn_video.url }}" type='video/webm'></source>
<source src="{{ mn_video.url }}" type='video/mp4'></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider
upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
NOTE:
I tried it with django development server as well as with gunicorn.
I do not get any error in console as well as in terminal.

Seeking HTML5 video at a particular position in a web page

Following code is working but it is not starting the video from 3 seconds on my page
<video id="vid1" width="320" height="240" controls>
<source src="iphone16.mp4#t=3,9" type="video/mp4">
</video>
I am using Django for development of my web application. Any idea why it's not working in my case??
Thanks in advance

Django embed m4v from static locally

How would you embed a static file with .m4v extension , M4V is a file format,
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256" >
<param name="src" value="/static/example.m4v">
<param name="autoplay" value="false">
<param name="controller" value="true">
<embed src="/static/example.m4v" type="video/mp4" width="320" height="256" controller="true" controls="true" autostart="false"/>
</object>
The above example forces it to download.
http://django-embed-video.readthedocs.org/en/v0.11/index.html only works with online sites like youtube, few others.
I was struggling with this same issue. I pretty much copied the code from http://camendesign.com/code/video_for_everybody.
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: "MP4"
Open Format: "Ogg"
</p>
Then made sure to create .htaccess file with the following:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Also, I'm using an older version of django (1.6.5) for my project and I have my videos stored at my MEDIA_ROOT and have the MEDIA_URL also set in the settings.py so that the source of video looks like:
{{ MEDIA_URL }}/media/videos/video.m4v