部分苹果机型是无法video播放的,所以要做判断。如果是苹果的话,直接跳转视频连接,否则插入video标签
var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
if(isIphone){
window.location.href = videoUrl
}
这里我用的是video.js
<a href="javascript:void(0)" onclick="playVideo('http://vjs.zencdn.net/v/oceans.mp4')">
var _hmt = _hmt || [];
//播放视频
function playVideo(videoUrl){
var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
if(isIphone){
window.location.href = videoUrl
}
try{
hmt.push(['_trackEvent', 'videoClick', 'click']);
}catch(e){
console.log(e,'_hmt')
}
var str=
'<video id="videoBox" controls="controls" muted autoplay="autoplay" class="video-box video-js vjs-default-skin" preload="auto">' +
'<source id="video_path" src="'+videoUrl+'" type="video/mp4" />' +
'<source id="video_path" src="'+videoUrl+'" type="video/ogg" />' +
'</video>'+
'<label class="closeVideo">关闭视频</label>';
$('body').append(str);
var player = videojs('videoBox', {
"controls": true,
"autoplay": true,
}, function() {
this.play(); // 开始播放
});
$('.video-box').show();
$('.closeVideo').click(function(){
player.pause();
player.dispose();
$('.closeVideo').remove();
});
}
网络上其他人没有引用videoJS的做法,其实更加简洁,只是公司之前有人用videoJS,我就直接copy了
$(function(){
var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
if (isIphone) {
$(".play_video").click(function(){
window.location="视频的绝对地址url"
});
}
else {
$(".play_video").click(function(){
var videoHtml = "<video id=\"video_span\" class=\"url_video\" src=\"视频的绝对地址url\" x-webkit-airplay=\"true\" webkit-playsinline=\"true\" poster=\"视频封面图片的绝对地址\" preload=\"null\" loop=\"loop\" autoplay controls=\"controls\"></video>"
$("#video_div").html(videoHtml)
$(".video").show();
});
}
});