将所有视频嵌入通用HTML5视频播放器中

时间:2017-08-08 19:43:30

标签: php html5 video embed

我搜索系统,将所有媒体嵌入通用视频播放器中:

  • Twitter视频
  • Facebook视频
  • Youtube视频
  • Vimeo视频
  • 等...

你有想法将它嵌入PHP或HTML5中吗?

2 个答案:

答案 0 :(得分:1)

Youtube,Fb或Vimeo不允许您将其推入其他播放器中,但会将其网址中的视频嵌入其本机播放器中。还没有研究Twitter视频,但是您可以扩展我的脚本。 (函数getvidinfo也会获取缩略图,但我没有找到如何从fb中获取缩略图)。

<?
function getYoutubeIdFromUrl($url) {    
    $parts = parse_url($url);
    if(($parts["host"]=="m.youtube.com" || $parts["host"]=="youtube.com" || $parts["host"]=="www.youtube.com" || $parts["host"]=="youtu.be" || $parts["host"]=="www.youtu.be") && !strstr($url,"/c/") && !strstr($url,"/channel/") && !strstr($url,"/user/")){
    if(isset($parts['query'])){
        parse_str($parts['query'], $qs);
        if(isset($qs['v'])){
            return $qs['v'];
        }else if(isset($qs['vi'])){
            return $qs['vi'];
        }
    }
    if(($parts["host"]=="youtu.be" || $parts["host"]=="www.youtu.be") && isset($parts['path'])){
        $path = explode('/', trim($parts['path'], '/'));
        return $path[count($path)-1];
    }
    }
    if(strlen($url)==11 && (!strstr($url, "http://") && !strstr($url, "https://") && !strstr($url, "www.") && !strstr($url, "youtube") && !strstr($url, "www.") && !strstr($url, "youtu.be"))) return $url;
    return false;
}

function validateFbVideoUrl($url){
    $parts = parse_url($url);
    if(($parts["host"]=="facebook.com" || $parts["host"]=="www.facebook.com" || $parts["host"]=="fb.me" || $parts["host"]=="fb.com") && !strstr($url,"/pg/")){
        return $url;
    }
    return false;
}

function getVimeoId($url){
    $parts = parse_url($url);
    if($parts['host'] == 'www.vimeo.com' || $parts['host'] == 'vimeo.com'){
        $vidid=substr($parts['path'], 1);
        return $vidid;
    }
    return false;
}

function getvidinfo($url){
     $getYT=getYoutubeIdFromUrl($url);
     if($getYT){
        $result["type"]="yt";
        $result["string"]=$getYT;
        $result["img"]="https://img.youtube.com/vi/".$getYT."/mqdefault.jpg";
        return($result);
     }else{
         //fb video
         $getFB=validateFbVideoUrl($url);
         if($getFB){
            $result["type"]="fb";
            $result["string"]=$getFB;
            $result["img"]="example.com/your-image-here.jpg";// I DIDN'T FIND A WAY TO GET FB VIDEO THUMBNAIL
            return($result);
         }else{
             $vimeoid=getVimeoId($url);
             if($vimeoid){
                $hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$vimeoid.php"));
                $result["type"]="vim";
                $result["string"]=$vimeoid;
                $result["img"]=$hash[0]["thumbnail_large"];
                return($result);
             }
         }
    }
    return false;
}

function echovideo($url){
    if($url){
        $vidinfo=getvidinfo($url);
        if($vidinfo){
            if($vidinfo["type"]=="yt"){
            ?><div>
                <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/<?echo $vidinfo["string"]?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
                <?
            }elseif($vidinfo["type"]=="fb"){
                ?>
                <div>
                 <iframe src="https://www.facebook.com/plugins/video.php?href=<? echo $vidinfo["string"]; ?>&show_text=0&width=560&height=315" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe></div>
                 <?
            }elseif($vidinfo["type"]=="vim"){
                ?><div><iframe src="https://player.vimeo.com/video/<?echo $vimeoid;?>" width="560" height="315" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
                <?
            }
        }
    }
}
?>

简单用法:

echovideo("https://www.youtube.com/watch?v=VRuL3_5rFnU");

答案 1 :(得分:0)

您可以使用基本的HTML5视频标记。这是一个非常好的链接,可以帮助您入门 https://www.html5rocks.com/en/tutorials/video/basics/

<video controls>
  <source src="devstories.webm" 
          type='video/webm;codecs="vp8, vorbis"'/>
  <source src="devstories.mp4"
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>

在上面的示例中,您可以看到视频文件名是devstories,您可以使用以下类型的视频格式:mp4,webm和ogg。

如果您需要有关格式的更多信息,请参阅此处 https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats