My code works by default only with the file formatMP4
Note: My code is adapted to work with the
plugin
player video.js
function insertar_contenido(vid,elemento){
var contenido, fuente
var url = elemento.attr("href")
var ext = "mp4"
var formato = ext
var es_video = new RegExp("^.+\\."+ext+"$").test(url)
var cargando = $('.loading')
function mostrar(){cargando.fadeIn(200)}
function ocultar(){cargando.fadeOut(100)}
mostrar()
var cuadro = vid.find(".cuadro")
if(cuadro.length!=0){
$("#ocultado").append(cuadro)
}
if(es_video){
var json = {"controls": true, "autoplay": false, "preload": "auto", "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2]};
contenido = $(document.createElement("video"))
fuente = $(document.createElement("source"))
fuente.attr("src",url)
fuente.attr("type","video/"+formato)
contenido.attr("class","video-js vjs-default-skin")
contenido.attr('data-setup', JSON.stringify(json));
} else {
//
}
}
I need to be able to use other types of formats such as: mp3
, mp4
, m3u8
, ts
, video YouTube
among others.
So according to the file extension add the video type format, for example:
if(var ==="mp4"){
fuente.attr("type","video/mp4")
}elseif(var === "m3u8"){
fuente.attr("type","application/x-mpegURL")
}
I have the following idea, I don't know if it's correct and I think it's not because it doesn't give results:
function insertar_contenido(vid,elemento){
var ext = "mp4, mp3, mpeg, m3u8" //Entre otros
}
if(es_video){
if(var ==="mp4"){
fuente.attr("type","video/mp4")
}elseif(var === "m3u8"){
fuente.attr("type","application/x-mpegURL")
}
}
Perhaps if it had been in it PHP
would have been successful.
I know very little about JavaScript / jQuery
, could you explain me how to achieve this goal please?
You can make a function that extracts the extension using the URL and analyzes it to determine its MIME type ,
tipo/extensión
, the first part is the type, which can beaudio
,video
and the second, the extension. Sometimes the extension stays the same, for example,mp3
,mp4
, but other times, it can change, for example tom3u8
stayx-mpegURL
.To extract the extension, one way is to use a regular expression like the following:
What this does is capture all the matches that have a period (
.
), and after the period, numbers or letters of the alphabet. Example, inaudio.mp3?2
matches.mp3?2
, but since?2
it is not part of the alphabet, it only captures.mp3
and saves it in the variableext
to be able to check if it is such an extension.If there are any matches, the last match, that is, the one furthest to the right, is found, and then the point is removed using
slice(1)
.Using regular expressions, you can also check if the extension matches. In the following case, it matches
mp3
ormpeg
, and determines that it is audio.The following is a check without using regular expressions, this is done for specific cases where the type and extension totally vary:
To determine that it is a Youtube link , you can improvise a regular expression, which looks to see if it has a special code at the end. The video code is 11 characters, which can be numbers from 0 to 9, letters of the alphabet without the ñ, the hyphen and the underscore
[0-9a-z-_]{11}
, it is base 64 because there are 10 numbers, 26 lowercase, 26 uppercase, 1 hyphen and 1 underscore. Adding that, we are10 + 26 + 26 + 1 + 1
left with 64. To add certainty that it comes from YouTube , we can add that it matchesyoutube.be
or simplyyoutube
, maybe one day I will change the server and then the regular expression would have to be changed.To keep things simple, I'm not going to check if you have
www
either the protocolshttp
orhttps
. The number 64 raised to the power of 11 means that there could be an unimaginable number of possible videos, more than a trillion.The function is as follows. I also add examples of use:
After having put that function, the function
insertar_contenido
would have the following changes:To do something different for each type is done by
if
:Unfortunately,
m3u8
they can't be played natively, so you need to use an HLS library :Autoplay video on property detection
loadedmetadata
:The complete code would be as follows: