为了账号安全,请及时绑定邮箱和手机立即绑定

将Youtube视频源显示为HTML5视频标签?

/ 猿问

将Youtube视频源显示为HTML5视频标签?

叮当猫咪 2019-09-21 13:52:19

我正在尝试将YouTube视频源放入HTML5 <video>标签,但似乎不起作用。经过一番谷歌搜索,我发现HTML5不支持YouTube视频URL作为来源。

您可以使用HTML5嵌入YouTube视频吗?如果没有,是否有任何解决方法?


查看完整描述

3 回答

?
天涯尽头无女友

第1步:添加&html5=True到您喜欢的YouTube网址


步骤2:<video/>在来源中寻找标签


第3步:添加controls="controls"到视频标签:<video controls="controls"..../>


例:


<video controls="controls" 

       class="video-stream" 

       x-webkit-airplay="allow" 

       data-youtube-id="N9oxmRT2YWw" 

       src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&amp;itag=43&amp;ipbits=0&amp;signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&amp;sver=3&amp;ratebypass=yes&amp;expire=1300417200&amp;key=yt1&amp;ip=0.0.0.0&amp;id=37da319914f6616c"></video>

注意那里似乎有些expire东西。我不知道该src字符串可以工作多长时间。


仍在测试自己。


请注意,此视频src特定于您用于检索页面源的浏览器。我认为Youtube是动态(至少当前)生成的HTML,因此在测试是否在Firefox中进行复制时,这种方法适用于Firefox,但不适用于Chrome。


查看完整回答
反对 回复 2019-09-21
?
米琪卡哇伊

该答案不再起作用,但是我正在寻找解决方案。

截至。2015/2/24。有一个网站(youtubeinmp4),可让您下载中的youtube视频.mp4 format,您可以利用此网站(带有一些JavaScript)来逃避将youtube视频嵌入<video>标签中的麻烦。这是此操作的演示。


优点

相当容易实现。

实际上,服务器反应非常快(检索视频并不需要那么多)。

抽象(公认的解决方案,即使它工作正常,也只有在您事先知道要播放哪些视频的情况下才适用,这适用于任何用户输入的网址)。

缺点

显然,这取决于youtubeinmp4.com服务器及其提供下载链接的方式(可以作为<video>源传递),因此此答案将来可能无效。


您无法选择视频质量。


JavaScript(之后load)

videos = document.querySelectorAll("video");

for (var i = 0, l = videos.length; i < l; i++) {

    var video = videos[i];

    var src = video.src || (function () {

        var sources = video.querySelectorAll("source");

        for (var j = 0, sl = sources.length; j < sl; j++) {

            var source = sources[j];

            var type = source.type;

            var isMp4 = type.indexOf("mp4") != -1;

            if (isMp4) return source.src;

        }

        return null;

    })();

    if (src) {

        var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);

        if (isYoutube) {

            var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);

            id = (id.length > 1) ? id.splice(1) : id;

            id = id.toString();

            var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";

            video.src = mp4url + id;

        }

    }

}

用法(完整)

<video controls="true">

    <source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />

</video>

标准视频格式。


用法(迷你)

<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>

使用youtube.be缩短的url和src直接在<video>标记中的属性,有点少见但相当小。


希望能帮助到你!:)


查看完整回答
反对 回复 2019-09-21
?
牛魔王的故事

的<video>标签是指加载以支持的格式的视频(其可以通过浏览器不同)。


YouTube嵌入链接不仅是视频,而且通常是包含逻辑的网页,这些逻辑可检测用户支持的内容以及如何使用HTML5或Flash或其他基于用户PC上可用插件的youtube视频播放。这就是为什么将视频代码与youtube视频一起使用时遇到困难的原因。


YouTube确实提供了开发人员API,可将youtube视频嵌入到您的页面中。


我制作了一个JSFiddle作为实时示例:http : //jsfiddle.net/zub16fgt/


您还可以在这里阅读有关YouTube API的更多信息:https : //developers.google.com/youtube/iframe_api_reference#Getting_Started


该代码也可以在下面找到


在您的HTML中:


<div id="player"></div>

在您的Javascript中:


var onPlayerReady = function(event) {

    event.target.playVideo();  

};


// The first argument of YT.Player is an HTML element ID. 

// YouTube API will replace my <div id="player"> tag 

// with an iframe containing the youtube video.


var player = new YT.Player('player', {

    height: 320,

    width: 400,

    videoId : '6Dc1C77nra4',

    events : {

        'onReady' : onPlayerReady

    }

});


查看完整回答
反对 回复 2019-09-21

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信