use*_*591 6 javascript video html5 dynamic video.js
我正在尝试使用嵌入视频的页面,当单击视频帧下方的链接时,该页面会动态更改源.源视频在我的主机服务器上.即这张照片说明了:
![页面样本] [1]
我遇到了这个页面,似乎有答案,但我尝试了它并没有用.按照这个例子,我将css和javascript粘贴在正文中的必要html中.我更新了对我的网址的所有引用,并尝试保持文件名与测试示例相同.以下是我的尝试.
有人可以指出我的错误,或提供更优雅的方式吗？单击链接时,基本上动态更改嵌入视频,视频可在所有典型浏览器和大多数设备中使用.这是一个wordpress网站,使用JW Player进行wordpress,(我的错误)而不是我发现这个脚本/代码实际上是用于Video.js
它加载预图像但不播放.
作为一个测试,我试过这个,它确实播放单个视频:
<video id="testvideo" class="video-js vjs-default-skin" width="440" height="300" controls="controls">
<source src="http://www.mywebsite.net/videos/testvid_01.mp4" type="video/mp4"/>
<source src="http://www.mywebsite.net/videos/testvid_01.webm" type="video/webm"/>
<source src="http://www.mywebsite.net/videos/testvid_01.ogv" type="video/ogg"/>
</video>
多个源链接的javascript版本
<html>
<head>
<title></title>
<style media="screen" type="text/css">
.wrap { margin:30px auto 10px; text-align:center }
.container { width:440px; height:300px; border:5px solid #ccc }
p { font: 10px/1.0em 'Helvetica',sans-serif; margin:20px }
</style>
<script>
$("input[type=button]").click(function() {
var $target = "testvid_"+$(this).attr("rel");
var $content_path = "http://www.mywebsite.net/videos/";
var $vid_obj = _V_("div_video");
// hide the current loaded poster
$("img.vjs-poster").hide();
$vid_obj.ready(function() {
// hide the video UI
$("#div_video_html5_api").hide();
// and stop it from playing
$vid_obj.pause();
// assign the targeted videos to the source nodes
$("video:nth-child(1)").attr("src",$content_path+$target+".mp4");
$("video:nth-child(1)").attr("src",$content_path+$target+".ogv");
$("video:nth-child(1)").attr("src",$content_path+$target+".webm");
// replace the poster source
$("img.vjs-poster").attr("src",$content_path+$target+".png").show();
// reset the UI states
$(".vjs-big-play-button").show();
$("#div_video").removeClass("vjs-playing").addClass("vjs-paused");
// load the new sources
$vid_obj.load();
$("#div_video_html5_api").show();
});
});
$("input[rel='01']").click();
</script> </head>
<body>
<section class="container wrap">
<video id="div_video" class="video-js vjs-default-skin" controls preload="auto" width="440" height="300" poster="http://www.mywebsite.net/videos/testvid_01.png" data-
setup="{}">
<source src="" type="video/mp4">
<source src="" type="video/ogg">
<source src="" type="video/webm">
</video>
</section>
<div class="wrap">
<input rel="01" type="button" value="load video 1">
<input rel="02" type="button" value="load video 2">
<input rel="03" type="button" value="load video 3">
</div>
</body>
</html>
第一个视频的预加载图像加载但没有视频,错误是"没有支持格式的视频和找到的MIME类型"
所以我在本节中添加了第一个视频的来源
setup="{}">
<source src="http://www.mywebsite.net/videos/videos/testvid_01.mp4" type="video/mp4">
<source src="http://www.mywebsite.net/videos/videos/testvid_01.ogv" type="video/ogg">
<source src="http://www.mywebsite.net/videos/videos/testvid_01.webm type="video/webm">
</video>
结果是第一个视频加载但不加载其他链接的视频.
视频/ PNG的名字:testvid_01.mp4,testvid_01.ogv,testvid_01.webm,testvid_01.png testvid_02.mp4,testvid_02.ogv,testvid_02.webm,testvid_02.png testvid_03.mp4,testvid_03.ogv,testvid_03.webm,testvid_03巴纽
我在wordpress页面和html页面都试过这个结果是一样的.
我不确定即使这个脚本会做我想要的吗？
mis*_*ben 17
这将覆盖视频元素的src属性三次,因此它将始终设置为webm视频.
$("video:nth-child(1)").attr("src",$content_path+$target+".mp4");
$("video:nth-child(1)").attr("src",$content_path+$target+".ogv");
$("video:nth-child(1)").attr("src",$content_path+$target+".webm");
而是使用video.js API加载一个源数组,以便video.js可以选择当前播放技术可以播放的一个:
$vid_obj.src([
{ type: "video/mp4", src: $content_path+$target+".mp4" },
{ type: "video/webm", src: $content_path+$target+".webm" },
{ type: "video/ogg", src: $content_path+$target+".ogv" }
]);
更新小提琴:http://jsfiddle.net/mister_ben/8awNt/
JavaScript 示例似乎不包含 video.js 库。您可以尝试在头部包含以下内容。
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
否则，有没有办法在某处实时查看页面？
| 归档时间： |
|
| 查看次数： |
21311 次 |
| 最近记录： |