为所有浏览器正确嵌入网站视频答案

【问题标题】：Correct Website Video Embed for all Browsers为所有浏览器正确嵌入网站视频
【发布时间】：2016-03-29 17:07:45
【问题描述】：

我正在使用此代码在我的网站上嵌入视频（我认为这是最佳 SEO 做法）。它在 IE 和 Firefox 上运行有点慢。我添加了 javascript（在 Stack 上找到）来显示播放、暂停、音量、全屏选项。我担心javascript会减慢页面速度。我能否确认这是执行此操作的最佳方式或提供其他选择？

<head>
<!--Video.js | HTML5 Video Player -->
<link href="//vjs.zencdn.net/3.2/video-js.css" rel="stylesheet" type="text/css">
<script src="http://vjs.zencdn.net/3.2/video.js"></script>
<script>
        _V_.options.flash.swf = "video-js.swf";
</script>
<script>    
        _V_("example_video_1").ready(function(){   
            var myPlayer = this;
        }); 
</script>
</head>
<body>
<video id="video_1" class="video-js vjs-default-skin" controls width="480" height="204" autoplay preload="auto" poster="/images/Buy-Mexpro.jpg">
    <source src="/videos/Mexpro-1Min-HDvideo.mp4" type="video/mp4" />
    <source src="/videos/Mex_Pro_1_Minute_spot-HD.webm" type="video/webm" />
    <source src="/videos/Mex_Pro_1_Minute_spot-HD.webm.ogv" type="video/ogg" />
    <object id="videocontainer-object">
        <param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"></param>
        <param name="flashvars" value="/videos/Mexpro-1Min-HDvideo.mp4&amp;playButtonOverlay=false&amp;loop=true&amp;autoPlay=true&amp;controlBarMode=none"></param>
        <param name="allowFullScreen" value="false"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed id="videocontainer-embed" src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="720" flashvars="src=http://homepage.de/video/BigWeb.mp4&amp;controlBarMode=none&amp;playButtonOverlay=false&amp;loop=true&amp;autoPlay=true"></embed>
    <input type="button" value="Pause" onClick="myPlayer.pause();">
    <input type="button" value="Play" onClick="myPlayer.play();">
    </object>
</video>
</body>

【问题讨论】：

标签： javascript html5-video embed const-correctness multiple-browsers

【解决方案1】：

您使用的是非常旧的video.js 版本。如果你使用它，你应该使用当前版本：

<link href="//vjs.zencdn.net/5.8/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.8/video.js"></script>

<video id="video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}' poster="/images/Buy-Mexpro.jpg">
  <source src="/videos/Mexpro-1Min-HDvideo.mp4" type="video/mp4" />
  <source src="/videos/Mex_Pro_1_Minute_spot-HD.webm" type="video/webm" />
  <source src="/videos/Mex_Pro_1_Minute_spot-HD.webm.ogv" type="video/ogg" />
</video>

嵌入的 object 不是也从来没有必要将 video.js 的 Flash 技术用作后备。

【讨论】：